Stacked 100 Bar Series
Send Feedback

Glossary Item Box

Topic Overview


This topic provides a conceptual overview of the IGChartView™ control’s Stacked 100 Bar series and demonstrates how to add it to the chart view using a code example.

In this topic


Stacked 100 Bar series summary

Belonging to a group of Category Series, Stacked 100 Bar series renders using a collection of rectangles stacked next to each other. Each stacked fragment in the collection represents one visual element in each stack, and can contain both positive and negative values with all positive values grouped on the positive side of the x-axis, and all negative values grouped on the negative side of the x-axis. The Stacked 100 Bar series is identical to the Stacked Bar Series in all aspects except in their treatment of the values on x-axis. Instead of presenting a direct representation of the data, the Stacked 100 Bar series presents the data in terms of percent of the sum of all values in a data point. In addition, the Stacked 100 Bar series uses the same concepts of data plotting as Stacked 100 Column Series, but data points are stacked along the horizontal line (x-axis) rather than along the vertical line (y-axis). In other words, the Stacked 100 Bar series renders like the Stacked 100 Column Series, but with 90 degrees clockwise rotation.

Data requirements

While the IGChartView control allows for easy binding to your own data model, make sure to supply the appropriate data amounts and types required by that series. Failing to do so causes the IGChartView to appear blank.

Required – to render data, the bound data model must contain at least one numeric field, and may contain an optional string for labels. It is recommended that the data model contain two or more numeric data fields so that each point of the Stacked 100 Bar series has two or more stacked fragments.

Data rendering rules

The Stacked 100 Bar series renders data using the following rules:

  • An IGStackedFragmentSeries needs to be added to the series collection property of the IGStacked100BarSeries for every numeric column in the data model that you want rendered
  • Each row in the data model represents singularly stacked bar. Sections are created based on the columns in the data model that are mapped to the valueProperty of IGStackedFragmentSeries objects
  • When rendering the second value in the row, its value is added to the points of the previous values in that row. Therefore, each point going upwards on the chart is a cumulative sum of the values at that point.
  • The data values do not need to be percentages, as the sum of the data values in the row is used to calculate the percentage applicable to each section of the bar
  • The string or date time column mapped to the label property of data mapping on the y-axis is used as the category labels. If the data mapping for label is not specified, default labels are used
  • Category labels appear on the y-axis while data values appear on the x-axis
  • When rendering, multiple series of the IGStacked100BarSeries type renders in clusters, with each cluster representing a data point. The first IGStacked100BarSeries in the series collection of the IGChartView control renders as a bar on the bottom of the cluster with each subsequent series rendered stacked on top of the previous series.

Adding a Stacked 100 Bar Series to the IGChartView – Code Example


The code below uses the IGStackedSeriesDataSourceHelper to supply randomly generated data to a Stacked 100 Bar series firstly by adding to the IGChartView instance, and then adding the IGChartView as a subview of the current UIView.


This code example requires the inclusion of the Chart framework, detail about how to add this framework is available in the Adding the Chart Framework File topic.


In C#:

public class DataModel : NSObject
      public string Label { get; set; }
      public float Value1 { get; set; }
      public float Value2 { get; set; }
      public float Value3 { get; set; }
IGChartView _chartView;
IGStackedSeriesDataSourceHelper _stackedChartDataSourceHelper;
IGLegend _legend;
List<NSObject> _data;
void PopulateData()
      _data = new List<NSObject>();
      for (int i = 0; i < 10; i++) {
            DataModel item = new DataModel();
            item.Value1 = new Random((int)DateTime.Now.Ticks).Next(100);
            item.Value2 = new Random((int)DateTime.Now.Ticks).Next(100);
            item.Value3 = new Random((int)DateTime.Now.Ticks).Next(100);
            item.Label = string.Format ("Label {0}", i);
public override void ViewDidLoad ()
      RectangleF bounds = new RectangleF(0, 0, this.View.Frame.Size.Width, this.View.Frame.Size.Height);
      _chartView = new IGChartView(bounds);
      _chartView.BackgroundColor = UIColor.White;
      _stackedChartDataSourceHelper = new IGStackedSeriesDataSourceHelper(_data.ToArray(), NSArray.FromObjects("Value1", "Value2", "Value3"));
      _chartView.AddStackedSeries(new Class(typeof(IGStacked100BarSeries)), "series", _stackedChartDataSourceHelper, "xAxis", "yAxis");
      _legend = new IGLegend(IGChartLegendType.IGChartLegendTypeSeries);
      _legend.Frame = new RectangleF(20, 20, 100, 100);
      _chartView.Legend = _legend;

In Objective-C:

@interface DataModel : NSObject
@property (nonatomic, retain) NSString *label;
@property (nonatomic) float value1;
@property (nonatomic) float value2;
@property (nonatomic) float value3;
@interface igViewController : UIViewController
    IGChartView *_chartView;
    IGStackedSeriesDataSourceHelper *_stackedChartDataSourceHelper;
    IGLegend *_legend;
    NSMutableArray *_data;
@implementation DataModel
@synthesize value1, value2, value3;
@implementation igViewController
    _data = [[NSMutableArray alloc]init];
    for (int i=0; i<10; i++)
        DataModel *item = [[DataModel alloc]init];
        item.value1 = arc4random() % 100;
        item.value2 = arc4random() % 100;
        item.value3 = arc4random() % 100;
        item.label = [NSString stringWithFormat:@"Label %d", i];
        [_data addObject:item];
    [self populateData];
    CGRect bounds = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
    _chartView = [[IGChartView alloc] initWithFrame:bounds];
    _chartView.backgroundColor = [UIColor whiteColor];
    _stackedChartDataSourceHelper = [[IGStackedSeriesDataSourceHelper alloc]initWithData:_data fields:@"value1", @"value2", @"value3", nil];
    [_chartView addStackedSeriesForType:[IGStacked100BarSeries class] usingKey:@"series" withDataSource:_stackedChartDataSourceHelper firstAxisKey:@"xAxis" secondAxisKey:@"yAxis"];    
    [self.view addSubview:_chartView];
    _legend = [[IGLegend alloc] initWithLegendType:IGChartLegendTypeSeries];
    [_legend setFrame:CGRectMake(20, 20, 100, 100)];
    _chartView.legend = _legend;
    [self.view addSubview:_legend];

Related Content


The following topic provides additional information related to this topic.



This collection of topics explains each of the individual charts supported by the IGChartView control.