Range Area Series
Send Feedback

Glossary Item Box

Topic Overview


This topic provides a conceptual overview of the Range Area series in the IGChartView™ control and uses a code example to demonstrate how to add it to the chart view.

In this topic


Range Area series summary

Range area series belongs to a group of category series that uses two lines with the area between the lines filled in when rendered. This type of series emphasizes the amount of change between low and high values in the same data point over time or compares multiple items. Range values are represented on the y-axis (IGNumericYAxis) and categories are displayed on the x-axis (IGCategoryXAxis or IGCategoryDateTimeXAxis).

The range area series is identical to the range column series in all aspects except that the ranges are represented as filled area rather than a set of vertical columns.

Data requirements

While the IGChartView control allows you to easily bind it to your own data model, it is important that you are supplying the appropriate amount and type of data that the series requires. If the data does not meet the minimum requirements based on the type of series that you are using, the IGChartView will appear blank.

The following is a list of data requirements for the range area series type:

  • Required – the data model must contain at least two numeric data columns for rendering the range between the values.
  • Optional – the data model may contain an optional string or NSDate field for labels.

Adding a Range Area Series to the IGChartView – Code Example


The code below uses the IGHighLowSeriesDataSourceHelper to supply randomly generated data to a range area series that first gets added to the IGChartView instance, and then the IGChartView is added as a subview of the current UIView.


This code example requires the inclusion of the IGChartView framework, detail about how to add this framework can be found in the Adding the Chart Framework File topic.


In Objective-C:

    NSMutableArray *dataHigh = [[NSMutableArray alloc] init];
    NSMutableArray *dataLow = [[NSMutableArray alloc] init];
    for (int i = 0; i < 10; i++)
        double value = arc4random() % 100 + 100;
        [dataHigh addObject:[[NSNumber alloc] initWithDouble:value]];
        value -= 100;
        [dataLow addObject:[[NSNumber alloc] initWithDouble:value]];
    IGHighLowSeriesDataSourceHelper *source = [[IGHighLowSeriesDataSourceHelper alloc] init];
    source.highValues = dataHigh;
    source.lowValues = dataLow;
    IGChartView *infraChart = [[IGChartView alloc] initWithFrame:self.view.frame];
    [infraChart setAutoresizingMask:UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight];
    IGCategoryXAxis *xAxis = [[IGCategoryXAxis alloc] initWithKey:@"xAxis"];
    IGNumericYAxis *yAxis = [[IGNumericYAxis alloc] initWithKey:@"yAxis"];
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];
    IGRangeAreaSeries *rangeAreaSeries = [[IGRangeAreaSeries alloc] initWithKey:@"rangeAreaSeries"];
    rangeAreaSeries.xAxis = xAxis;
    rangeAreaSeries.yAxis = yAxis;
    rangeAreaSeries.dataSource = source;
    [infraChart addSeries:rangeAreaSeries];
    [self.view addSubview:infraChart];

In C#:

List<NSObject> dataHigh = new List<NSObject>();
List<NSObject> dataLow = new List<NSObject>();
Random r = new Random();
for(int i = 0;i <25; i++)
double val = r.Next() % 100 + 100;
dataHigh.Add(new NSNumber(val));
val -= 100
dataLow.Add(new NSNumber(val));

IGCategoryDateSeriesDataSourceHelper source = new IGCategoryDateSeriesDataSourceHelper();
source.HighValues = dataHigh.ToArray();
source.LowValues = dataLow.ToArray();

IGChartView chart = new IGChartView(this.View.Frame);
chart.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;


IGCategoryXAxis xAxis = new IGCategoryXAxis("xAxis");
IGNumericYAxis yAxis = new IGNumericYAxis("yAxis");

IGRangeAreaSeries series= new IGRangeAreaSeries ("series");
series.XAxis = xAxis;
series.YAxis = yAxis;
series.DataSource = source;


Related Content


The following topics provide additional information related to this topic.



This is a group of topics explaining the various types of Category series supported by the IGChartView control.