Chart Series: Bar

TKChartBarSeries are used to visualize data points as bar blocks where the width of each bar denotes the magnitude of its value. The following snippet demonstrates how to manually populate one Bar series:

NSMutableArray *array = [[NSMutableArray alloc] init];
for (int i = 0; i<8; i++) {
    [array addObject:[[TKChartDataPoint alloc] initWithX:@(arc4random() % 100) Y:@(i+1)]];
}

TKChartSeries *series = [[TKChartBarSeries alloc] initWithItems:array];
series.style.paletteMode = TKChartSeriesStylePaletteModeUseItemIndex;
series.selection = TKChartSeriesSelectionDataPoint;
[_chart addSeries:series];
var items = [TKChartDataPoint]()
for i in 0..<8 {
    items.append(TKChartDataPoint(x:Int(arc4random()%100), y:(i+1)))
}

let series = TKChartBarSeries(items:items)
series.style.paletteMode = TKChartSeriesStylePaletteMode.useItemIndex
series.selection = TKChartSeriesSelection.dataPoint
chart.addSeries(series)
Random r = new Random ();
List<TKChartDataPoint> list = new List<TKChartDataPoint> ();
for (int i = 0; i < 8; i++) {
    list.Add (new TKChartDataPoint (new NSNumber (r.Next () % 100), new NSNumber (i + 1)));
}

TKChartBarSeries series = new TKChartBarSeries (list.ToArray());
series.Style.PaletteMode = TKChartSeriesStylePaletteMode.UseItemIndex;
series.Selection = TKChartSeriesSelection.DataPoint;
chart.AddSeries (series);

Configure clustering of bar series

If you want to cluster multiple bar series side by side, they should use a shared y-axis:

NSArray *categories = @[ @"Greetings", @"Perfecto", @"NearBy", @"Family Store", @"Fresh & Green" ];
TKChartCategoryAxis *categoryAxis = [[TKChartCategoryAxis alloc] initWithCategories:categories];
chart.yAxis = categoryAxis;

TKChartSeries *series1 = [[TKChartBarSeries alloc] initWithItems:pointsWithCategoriesAndValues];
series1.yAxis = categoryAxis;

TKChartSeries *series2 = [[TKChartBarSeries alloc] initWithItems:pointsWithCategoriesAndValues2];
series2.yAxis = categoryAxis;

[chart beginUpdates];
[chart addSeries:series1];
[chart addSeries:series2];
[chart endUpdates];
let categories = ["Greetings", "Perfecto", "NearBy", "Family Store", "Fresh & Green" ];
let categoryAxis = TKChartCategoryAxis(categories: categories)
chart.yAxis = categoryAxis

let series1 = TKChartBarSeries(items: pointsWithCategoriesAndValues)
series1.yAxis = categoryAxis

let series2 = TKChartBarSeries(items: pointsWithCategoriesAndValues2)
series2.yAxis = categoryAxis

chart.beginUpdates()
chart.addSeries(series1)
chart.addSeries(series2)
chart.endUpdates()
var pointsWithCategoriesAndValues = new List<TKChartDataPoint> ();
var pointsWithCategoriesAndValues2 = new List<TKChartDataPoint>();
var categories = new [] { "Greetings", "Perfecto", "NearBy", "Family Store", "Fresh & Green" };
var values = new [] { 70, 75, 58, 59, 88 };

for (int i = 0; i < categories.Length; ++i) {
    pointsWithCategoriesAndValues.Add (new TKChartDataPoint (new NSNumber (values [i]), NSObject.FromObject (categories [i])));
}

var values2 = new [] { 40, 80, 32, 69, 95 };
for (int i = 0; i < categories.Length; ++i) {
    pointsWithCategoriesAndValues2.Add (new TKChartDataPoint (new NSNumber(values2 [i]), NSObject.FromObject(categories [i])));
}

List<NSObject> objectCategories = new List<NSObject> ();
for (int i = 0; i < categories.Length; i++) {
    objectCategories.Add (new NSString (categories [i]));
}
var categoryAxis = new TKChartCategoryAxis (objectCategories.ToArray());
chart.YAxis = categoryAxis;

var series1 = new TKChartBarSeries(pointsWithCategoriesAndValues.ToArray());
series1.YAxis = categoryAxis;

var series2 = new TKChartBarSeries(pointsWithCategoriesAndValues2.ToArray());
series2.YAxis = categoryAxis;

chart.BeginUpdates();
chart.AddSeries(series1);
chart.AddSeries(series2);
chart.EndUpdates();

Configure stacking of bar series

The TKChartBarSeries can be combined by using different stack modes.

The Stack plots the points on top of each other:

TKChartStackInfo *stackInfo = [[TKChartStackInfo alloc] initWithID:@(1) withStackMode:TKChartStackModeStack];

TKChartBarSeries *series1 = [[TKChartBarSeries alloc] initWithItems:pointsWithCategoriesAndValues];
series1.stackInfo = stackInfo;

TKChartBarSeries *series2 = [[TKChartBarSeries alloc] initWithItems:pointsWithCategoriesAndValues2];
series2.stackInfo = stackInfo;

[chart beginUpdates];
[chart addSeries:series1];
[chart addSeries:series2];
[chart endUpdates];
let stackInfo = TKChartStackInfo(id: 1, with: TKChartStackMode.stack)

let series1 = TKChartBarSeries(items: pointsWithCategoriesAndValues)
series1.stackInfo = stackInfo

let series2 = TKChartBarSeries(items: pointsWithCategoriesAndValues2)
series2.stackInfo = stackInfo

chart.beginUpdates()
chart.addSeries(series1)
chart.addSeries(series2)
chart.endUpdates()
var stackInfo = new TKChartStackInfo(new NSNumber(1), TKChartStackMode.Stack);

var series1 = new TKChartBarSeries(pointsWithCategoriesAndValues.ToArray());
series1.StackInfo = stackInfo;

var series2 = new TKChartBarSeries(pointsWithCategoriesAndValues2.ToArray());
series2.StackInfo = stackInfo;

chart.BeginUpdates();
chart.AddSeries(series1);
chart.AddSeries(series2);
chart.EndUpdates();

The Stack100 displays the value as percent:



Configure visual appearance of bar series

If you would like to customize the appearance of bar series, you should change its style properties.

You can change the fill and stroke in the following manner:

TKChartBarSeries *series = [[TKChartBarSeries alloc] initWithItems:pointsWithCategoriesAndValues];
series.style.palette = [[TKChartPalette alloc] init];

TKChartPaletteItem *palleteItem = [[TKChartPaletteItem alloc] init];
palleteItem.fill = [TKSolidFill solidFillWithColor:[UIColor redColor]];
palleteItem.stroke = [TKStroke strokeWithColor:[UIColor blackColor]];

[series.style.palette addPaletteItem:palleteItem];
[chart addSeries:series];
let series = TKChartBarSeries(items: pointsWithCategoriesAndValues)
series.style.palette = TKChartPalette()

let paletteItem = TKChartPaletteItem()
paletteItem.fill = TKSolidFill(color: UIColor.red)
paletteItem.stroke = TKStroke(color: UIColor.black)
series.style.palette!.addItem(paletteItem)
chart.addSeries(series)
var series = new TKChartBarSeries (pointsWithCategoriesAndValues.ToArray());
series.Style.Palette = new TKChartPalette ();

var paletteItem = new TKChartPaletteItem ();
paletteItem.Fill = new TKSolidFill (UIColor.Red);
paletteItem.Stroke = new TKStroke (UIColor.Black);
series.Style.Palette.AddPaletteItem (paletteItem);
chart.AddSeries (series);

You can change the gap between columns with the following code snippet:

TKChartBarSeries *series = [[TKChartBarSeries alloc] initWithItems:pointsWithCategoriesAndValues];
series.gapLength = 0.5;
[chart addSeries:series];
let series = TKChartBarSeries(items: pointsWithCategoriesAndValues)
series.gapLength = 0.5
chart.addSeries(series)
var series = new TKChartBarSeries (pointsWithCategoriesAndValues.ToArray ());
series.GapLength = 0.5f;
chart.AddSeries (series);

Note that the value should be between 0 and 1, where a value of 0 means that a bar would take the entire space between two ticks, while a value of 1 means the bar will have zero width as all the space should appear as a gap.

It is also possible to limit the height of the bar using maxBarHeight and minBarHeight properies.

TKChartBarSeries *series = [[TKChartBarSeries alloc] initWithItems:pointsWithCategoriesAndValues];
series.minBarHeight = @20;
series.maxBarHeight = @50;
[chart addSeries:series];
let series = TKChartBarSeries(items: pointsWithCategoriesAndValues)
series.minBarHeight = 20
series.maxBarHeight = 50
chart.addSeries(series)
var series = new TKChartBarSeries (pointsWithCategoriesAndValues.ToArray ());
series.MinBarHeight = 20;
series.MaxBarHeight = 50;
chart.AddSeries (series);