Column Series
Send Feedback

Glossary Item Box

Topic Overview


This topic explains provides a conceptual overview of the Column series in the IGChartView™ control.

In this topic


Column series summary

The column series belongs to a group of category series and uses a collection of rectangles. Extending from the x-axis, on the bottom, toward the corresponding data point values on the y-axis, at the top of the chart, these rectangles reach away from the y-axis in either direction. Column series emphasizes the amount of change over a period or compares multiple items. Values are represented on the y-axis (IGNumericYAxis) and categories on the x-axis (IGCategoryXAxis or IGCategoryDateTimeXAxis). The column series uses the same concepts of data plotting as the bar series, but data points are stretched along the horizontal (x-axis) rather than the vertical (y-axis). In other words, the column series is rendered like the bar series but with 90 degrees of counter-clockwise rotation.

Data requirements

While the IGChartView control allows easy binding it to your own data model, it is important that you are supplying 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 column series type:

  • Required – the data model must contain at least one numeric field.
  • Optional – the data model may contain a string or NSDate field for labels.

Adding a Column Series to the IGChartView Code Example


The following code uses the IGCategorySeriesDataSourceHelper to supply randomly generated data to a column series that first gets added to the IGChartView instance, and then the current UIView adds the IGChartView as a subview.


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];
    IGColumnSeries *columnSeries = [[IGColumnSeries alloc] initWithKey:@"columnSeries"];
    columnSeries.xAxis = xAxis;
    columnSeries.yAxis = yAxis;
    columnSeries.dataSource = source;
    [infraChart addSeries:columnSeries];
    [self.view addSubview:infraChart];

In C#:

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");

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


Related Content


The following content 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.