Area Series
Send Feedback

Glossary Item Box

Topic Overview


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

In this topic


Area series summary

The Area series, a member of the Category Series group, uses a collection of points, connected by a line segment with the area beneath the line shaded when rendered. Values are plotted along the y-axis (IGNumericYAxis) and categories are plotted along the x-axis (IGCategoryXAxis or IGCategoryDateTimeXAxis). Multiple series can be plotted in one chart view.

Area series is typically used to emphasize one of the following things:

  • Amount of change over time
  • Comparison of multiple items
  • Relationship of parts to the whole (achieved by displaying the total of the plotted values)

The area series is very similar to the spline area series, with the noted exception that the lines connecting data points do not have spline interpolation or smoothing, thus providing a more precise rendering of the data.

Data requirements

While the IGChartView control allows easy binding to your own data model, make sure to supply the appropriate amounts and types of data required by the series. 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 area series type:

  • Required – the data model must contain at least one numeric data field. Two or more data points are recommended since a line segment consists of two or more points; by definition.
  • Optional – the data model may contain a string or NSDate field for labels.

Adding an Area Series to IGChartView – Code Example


The following code uses the IGCategorySeriesDataSourceHelper to supply randomly generated data to an area series that gets added to the IGChartView instance, and then the IGChartView is added as a sub-view 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 data = [[NSMutableArray alloc] init];
    for (int i = 0; i < 25; i++)
        double value = arc4random() % 100;
        [data addObject:[[NSNumber alloc] initWithDouble:value]];
    IGCategorySeriesDataSourceHelper *source = [[IGCategorySeriesDataSourceHelper alloc] init];
    source.values = data;
    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];
    IGAreaSeries *areaSeries = [[IGAreaSeries alloc] initWithKey:@"areaSeries"];
    areaSeries.xAxis = xAxis;
    areaSeries.yAxis = yAxis;
    areaSeries.dataSource = source;
    [infraChart addSeries:areaSeries];
    [self.view addSubview:infraChart];

In C#:

public override void ViewDidLoad ()
base.ViewDidLoad ();

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

IGCategoryDateSeriesDataSourceHelper source = new IGCategoryDateSeriesDataSourceHelper();
source.Values = data.ToArray();

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


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

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



Related Content


The following topic provides additional information related to this topic.



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