Bar Series
Send Feedback

Glossary Item Box

Topic Overview


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

In this topic


Bar series summary

The Bar series belongs to a group of category series and uses a collection of rectangles that extend from the y-axis on the left toward their corresponding data point values expressed on the x-axis. The Bar series uses the same concepts of data plotting as Column series, but data points are stretched along the vertical (y-axis) rather than horizontal (x-axis). In other words, the Bar series is rendered like the Column series, but with 90 degrees of clockwise rotation.

Figure 1: Bar Series

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 Bar series type:

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

Adding a Bar Series to the IGChartView – Code Example


The following code uses the IGCategorySeriesDataSourceHelper to supply randomly generated data to a bar 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];
    IGNumericXAxis *xAxis = [[IGNumericXAxis alloc] initWithKey:@"xAxis"];
    IGCategoryYAxis *yAxis = [[IGCategoryYAxis alloc] initWithKey:@"yAxis"];
    [infraChart addAxis:xAxis];
    [infraChart addAxis:yAxis];
    IGBarSeries *barSeries = [[IGBarSeries alloc] initWithKey:@"barSeries"];
    barSeries.xAxis = xAxis;
    barSeries.yAxis = yAxis;
    barSeries.dataSource = source;
    [infraChart addSeries:barSeries];
    [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;


IGNumericXAxis xAxis = new IGNumericXAxis ("xAxis");
IGCategoryYAxis yAxis = new IGCategoryYAxis ("yAxis");

IGBarSeries series= new IGBarSeries ("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.