SciChart iOS v2.x API > 2D Chart Types > The Band Series Type
The Band Series Type

High-Low Fill or Band Series are provided by the SCIFastBandRenderableSeries type. This accepts data from a SCIXyyDataSeries (X,Y1, Y2) and renders two lines with a polygon, which changes color depending on whether Y1>Y2 or vice versa.

The Band Series can be used to render profit & loss (green / red above or below a zero line), shaded areas of interest, technical indicators such as MACD and Ichimoku, or to simply shade an area above or below a threshold.

Examples for the Band Series can be found in the SciChart iOS Examples Suite

NOTE: For info about SCIXyyDataSeries, as well as other DataSeries types in SciChart, see this Section on DataSeries.

 

 

To declare a SCIFastBandRenderableSeries use the following code:

 

Declare a SCIFastBandRenderableSeries

// Create a SCIChartSurface instance
SCIChartSurface * _sciChartSurface = [[SCIChartSurface alloc]initWithFrame:frame];
// NOTE: You will need to add the SCIChartSurface as a SubView to your View
//
   
// Declare a new XyyDataSeries with XType Float, and YType Float
SCIXyyDataSeries * dataSeries = [[SCIXyyDataSeries alloc] initWithXType:SCIDataType_Float YType:SCIDataType_Float];
// Append some data. SCIGenericStruct converts without boxing of primitives
int dataCount = 20;
for(int i=0; i < dataCount; i++) {
    double time = 10 * i / (double)dataCount;
    double x = time;
    double y1 = arc4random_uniform(20);
    double y2 = arc4random_uniform(20);
    [dataSeries appendX:SCIGeneric(x) Y1:SCIGeneric(y1) Y2:SCIGeneric(y2)];
}

// Create a SCIFastBandRenderableSeries and apply DataSeries
SCIFastBandRenderableSeries *bandRenderableSeries = [[SCIFastBandRenderableSeries alloc] init];
// Style the Fill and Stroke for Y1, Y2
bandRenderableSeries.fillBrushStyle = [[SCISolidBrushStyle alloc] initWithColorCode:0x33279B27];
bandRenderableSeries.fillY1BrushStyle = [[SCISolidBrushStyle alloc] initWithColorCode:0x33FF1919];
bandRenderableSeries.strokeStyle = [[SCISolidPenStyle alloc] initWithColorCode:0xFF279B27 withThickness:1.0];
bandRenderableSeries.strokeY1Style = [[SCISolidPenStyle alloc] initWithColorCode:0xFFFF1919 withThickness:1.0];
bandRenderableSeries.dataSeries = dataSeries;
// Note Surface must have an XAxis/YAxis of type SCINumericAxis to match the float,float data
id<SCIAxis2DProtocol> axis = [[SCINumericAxis alloc] init];
[axis setGrowBy: [[SCIDoubleRange alloc]initWithMin:SCIGeneric(0.1) Max:SCIGeneric(0.1)]];
[_sciChartSurface.yAxes add:axis];
axis = [[SCINumericAxis alloc] init];
[axis setGrowBy: [[SCIDoubleRange alloc]initWithMin:SCIGeneric(0.1) Max:SCIGeneric(0.1)]];
[_sciChartSurface.xAxes add:axis];
// Add the Line Series to an existing SciChartSurface
[_sciChartSurface.renderableSeries add:bandRenderableSeries];
// Declare a new XyyDataSeries with XType Float, YType Float
var xyyDataSeries = SCIXyyDataSeries(xType: .float, yType: .float)

// Append some data. SCIGenericStruct converts without boxing of primitives
// The Band Series draws two lines at Y1, Y2 sharing the same X-value, and shading between them
// Line color and fill color depend on whether Y2 > Y1 or vice versa
for i in 0..<count {
    xyyDataSeries.appendX(SCIGeneric(i), y: SCIGeneric(i * 0.5), y2: SCIGeneric(i * 0.01))
}

// Create a SCIFastBandRenderableSeries and apply DataSeries
var bandRenderableSeries = SCIFastBandRenderableSeries()

// Style the Fill and Stroke for Y1, Y2
bandRenderableSeries.fillBrushStyle = SCISolidBrushStyle(colorCode: 0x33279b27)
bandRenderableSeries.fillY1BrushStyle = SCISolidBrushStyle(colorCode: 0x33ff1919)
bandRenderableSeries.strokeStyle = SCISolidPenStyle(colorCode: 0xff279b27, withThickness: 1.0)
bandRenderableSeries.strokeY1Style = SCISolidPenStyle(colorCode: 0xffff1919, withThickness: 1.0)
bandRenderableSeries.dataSeries = dataSeries

// Set the DataSeries on the band Series
bandRenderableSeries.data = xyyDataSeries

// Add the Band Series to an existing SciChartSurface
// Note Surface must have an XAxis/YAxis of type SCINumericAxis to match the float,float data
sciChartSurface.renderableSeries.add(bandRenderableSeries)
// Create a SCIChartSurface instance
var sciChartSurface = new SCIChartSurface();
// NOTE: You will need to add the SCIChartSurface as a SubView to your View
//
// Declare a new XyyDataSeries with XType Float, and YType Float
var dataSeries = new XyyDataSeries<float, float>();
// Append some data.
int dataCount = 20;
var random = new Random();
for (int i = 0; i < dataCount; i++)
{
    float x = 10 * i / (float)dataCount;
    float y1 = random.Next(0, 20);
    float y2 = random.Next(1, 20);
    dataSeries.Append(x, y1, y2);
}
// Create a SCIFastBandRenderableSeries and apply DataSeries
var bandRenderableSeries = new SCIFastBandRenderableSeries();
// Style the Fill and Stroke for Y1, Y2
bandRenderableSeries.FillBrushStyle = new SCISolidBrushStyle(colorCode: 0x33279b27);
bandRenderableSeries.FillY1BrushStyle = new SCISolidBrushStyle(colorCode: 0x33ff1919);
bandRenderableSeries.StrokeStyle = new SCISolidPenStyle(colorCode: 0xff279b27, thickness: 1.0f);
bandRenderableSeries.StrokeY1Style = new SCISolidPenStyle(colorCode: 0xffff1919, thickness: 1.0f);
bandRenderableSeries.DataSeries = dataSeries;
// Note Surface must have an XAxis/YAxis of type SCINumericAxis to match the float,float data
var xAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1) };
sciChartSurface.XAxes.Add(xAxis);
var yAxis = new SCINumericAxis { GrowBy = new SCIDoubleRange(0.1, 0.1) };
sciChartSurface.YAxes.Add(yAxis);
// Add the Line Series to an existing SciChartSurface           
sciChartSurface.RenderableSeries.Add(bandRenderableSeries);

 

Still stuck?

You can check the Online iOS Band Chart Example about using this kind of renderable series.

Also our series of Swift and Xamarin Tutorials here.