RangeBar series: Overview

Range bar series are a special case of bar series where the width of each bar denotes the difference between data point's low and high value. The bars can be displayed either horizontally, or vertically, depending on whether the CategoricalAxis is the vertical axis or the horizontal one. When the horizontal axis is categorical, the rectangles are displayed vertically. This means that they have equal width while their height represents the difference between the numerical values of each of the data points. The low value is the rectangle's start point, while the high value is the end point. On the other hand, when the vertical axis is categorical, the rectangles have equal height, while their width represents the difference between the values of the data point.

Example

Let's use the following model with low & high values:

get rangeBarSource() {

    return [
        { Name: "Groceries", High: 30, Low: 12 },
        { Name: "Tools", High: 135, Low: 124 },
        { Name: "Electronics", High: 55, Low: 12 },
        { Name: "Gardening", High: 50, Low: 29 }
    ];
}

We will use an instance of this model to assign it as the bindingContext of the page we have put our range bar series on:

import categoricalDataModelModule = require("../../data-models/categorical-data-model");

export function onPageLoaded(args){
    var page = args.object;
    page.bindingContext = new categoricalDataModelModule.CategoricalDataModel();
}

And finally, in the XML definition of the page we put a RadCartesianChart, add a BarSeries instance to it and bind the series to the source of data:

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-telerik-ui-pro/chart" xmlns="http://www.nativescript.org/tns.xsd">
      <chart:RadCartesianChart>

            <chart:RadCartesianChart.verticalAxis>
                <chart:LinearAxis horizontalLocation="Left" labelSize="11" />
            </chart:RadCartesianChart.verticalAxis>

            <chart:RadCartesianChart.horizontalAxis>
                <chart:CategoricalAxis verticalLocation="Bottom" labelSize="11" />
            </chart:RadCartesianChart.horizontalAxis>

            <chart:RadCartesianChart.series>
                <chart:RangeBarSeries
                     showLabels="true"
                     legendTitle="Ranges"
                     categoryProperty="Name"
                     lowPropertyName="Low"
                     highPropertyName="High"
                     items="{{ rangeBarSource }}">

                </chart:RangeBarSeries>
            </chart:RadCartesianChart.series>
        </chart:RadCartesianChart>
</navigation:ExamplePage>

Depending on the required Bar orientation, you can swap the axes' position and assign the Categorical to the horizontalAxis property and the Linear to the verticalAxis property. This will change the orientation of the range bars to vertical.

Cartesian chart: Range bar series Cartesian chart: Range bar series

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: