Chart Series: Range Column

TKChartRangeColumnSeries are used to visualize data points as column blocks where the height of each column denotes the difference between data point's low and high value. The code snippet below demonstrates how to create range column series.

Configure clustering of range column series

If you want to cluster multiple range column series side by side, they should use a shared x-axis:

NSArray *lowValues = @[@33, @29, @55, @21, @10, @39, @40, @11];
NSArray *highValues = @[@47, @61, @64, @40, @33, @90, @87, @69];
NSArray *lowValues2 = @[@31, @32, @57, @18, @12, @31, @45, @14];
NSArray *highValues2 = @[@43, @66, @61, @49, @31, @80, @82, @78];

NSMutableArray *dataPoints = [[NSMutableArray alloc] init];
NSMutableArray *dataPoints2 = [[NSMutableArray alloc] init];
for (int i = 0; i < 8; i++) {
    [dataPoints addObject:[TKChartRangeDataPoint dataPointWithX:@(i) low:lowValues[i] high:highValues[i]]];
    [dataPoints2 addObject:[TKChartRangeDataPoint dataPointWithX:@(i) low:lowValues2[i] high:highValues2[i]]];
}

TKChartRangeColumnSeries *series = [[TKChartRangeColumnSeries alloc] initWithItems:dataPoints];
TKChartRangeColumnSeries *series2 = [[TKChartRangeColumnSeries alloc] initWithItems:dataPoints2];

[chart addSeries:series];
[chart addSeries:series2];
let lowValues = [33, 29, 55, 21, 10, 39, 40, 11]
let highValues = [47, 61, 64, 40, 33, 90, 87, 69]
let lowValues2 = [31, 32, 57, 18, 12, 31, 45, 14]
let highValues2 = [43, 66, 61, 49, 31, 80, 82, 78]

var items = [TKChartRangeDataPoint]()
var items2 = [TKChartRangeDataPoint]()
for i in 0..<8 {
    items.append(TKChartRangeDataPoint(x: i, low: lowValues[i], high: highValues[i]))
    items2.append(TKChartRangeDataPoint(x: i, low: lowValues2[i], high: highValues2[i]))
}

let series = TKChartRangeColumnSeries(items:items)
let series2 = TKChartRangeColumnSeries(items:items2)

chart.addSeries(series)
chart.addSeries(series2)
var lowValues = new NSNumber[] {
    new NSNumber (33), new NSNumber (29),
    new NSNumber (55), new NSNumber (21),
    new NSNumber (10), new NSNumber (39),
    new NSNumber (40), new NSNumber (11)
};

var highValues = new NSNumber[] {
    new NSNumber (47), new NSNumber (61),
    new NSNumber (64), new NSNumber (40),
    new NSNumber (33), new NSNumber (90),
    new NSNumber (87), new NSNumber (69)
};

var lowValues2 = new NSNumber[] {
    new NSNumber (31), new NSNumber (32),
    new NSNumber (57), new NSNumber (18),
    new NSNumber (12), new NSNumber (31),
    new NSNumber (45), new NSNumber (14)
};

var highValues2 = new NSNumber[] {
    new NSNumber (43), new NSNumber (66),
    new NSNumber (61), new NSNumber (49),
    new NSNumber (31), new NSNumber (80),
    new NSNumber (82), new NSNumber (78)
};

List<TKChartRangeDataPoint> list = new List<TKChartRangeDataPoint> ();
List<TKChartRangeDataPoint> list2 = new List<TKChartRangeDataPoint> ();
for (int i = 0; i < 8; i++) {
    list.Add(TKChartRangeDataPoint.RangeColumnDataPoint(new NSNumber(i), lowValues[i], highValues[i]));
    list2.Add(TKChartRangeDataPoint.RangeColumnDataPoint(new NSNumber(i), lowValues2[i], highValues2[i]));
}

TKChartRangeColumnSeries series = new TKChartRangeColumnSeries (list.ToArray());
TKChartRangeColumnSeries series2 = new TKChartRangeColumnSeries (list2.ToArray());
chart.AddSeries(series);
chart.AddSeries(series2);

Configure visual appearance

If you want to customize the appearance of a range column series, you should change its style properties.

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

series.style.palette = [[TKChartPalette alloc] init];
TKChartPaletteItem *paletteItem = [[TKChartPaletteItem alloc] init];
paletteItem.fill = [TKSolidFill solidFillWithColor:[UIColor redColor]];
paletteItem.stroke = [TKStroke strokeWithColor:[UIColor blackColor]];
[series.style.palette addPaletteItem:paletteItem];
[chart addSeries:series];
series.style.palette = TKChartPalette()
let paletteItem = TKChartPaletteItem()
paletteItem.fill = TKSolidFill(color: UIColor.red)
paletteItem.stroke = TKStroke(color: UIColor.black)
series.style.palette!.addItem(paletteItem)
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);

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

series.gapLength = 0.5;
series.gapLength = 0.5
series.GapLength = 0.5f;

If you need to limit the width of the columns you can set the series maxColumnWidth and minColumnWidth properties. These properties allow you to have required minimum and possible maximum width for your series.

series.minColumnWidth = @20;
series.maxColumnWidth = @50;
series.minColumnWidth = 20
series.maxColumnWidth = 50
series.MinColumnWidth = 20;
series.MaxColumnWidth = 50;