Chart Series: Range Bar

TKChartRangeBarSeries are used to visualize data points as horizontal bars where the width of each bar denotes the difference between data point's low and high value. The code snippet below demonstrates how to create range bar series.

Configure clustering of range bar series

If you want to cluster multiple range bar series side by side, they should use a shared y-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 dataPointWithY:@(i) low:lowValues[i] high:highValues[i]]];
    [dataPoints2 addObject:[TKChartRangeDataPoint dataPointWithY:@(i) low:lowValues2[i] high:highValues2[i]]];
}

TKChartRangeBarSeries *series = [[TKChartRangeBarSeries alloc] initWithItems:dataPoints];
TKChartRangeBarSeries *series2 = [[TKChartRangeBarSeries 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(y: i, low: lowValues[i], high: highValues[i]))
    items2.append(TKChartRangeDataPoint(y: i, low: lowValues2[i], high: highValues2[i]))
}

let series = TKChartRangeBarSeries(items:items)
let series2 = TKChartRangeBarSeries(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.RangeBarDataPoint(new NSNumber(i), lowValues[i], highValues[i]));
    list2.Add(TKChartRangeDataPoint.RangeBarDataPoint(new NSNumber(i), lowValues2[i], highValues2[i]));
}

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

Configure visual appearance

If you want to customize the appearance of a range bar 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)
chart.addSeries(series)
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 the bars with the following code snippet:

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

If you need to limit the height of the bars you can set the series maxBarHeight and minBarHeight properties. These properties allow you to have required minimum and possible maximum height for your series.

series.minBarHeight = @20;
series.maxBarHeight = @50;
series.minBarHeight = 20
series.maxBarHeight = 50
series.MinBarHeight = 20;
series.MaxBarHeight = 50;