Bar series: Overview

Bar Series are categorical type of series that represent the objects from the data source as bars with different length. To use Bar series, you need to initialize a RadCartesianChart, define a CategoricalAxis and LinearAxis and bind the series to a set of data objects.

Adjusting Bar Size

By default, the size of a bar is calculated based on the axis plot mode and the count of the categories from the data source. There are cases in which the automatically calculated size does not meet the specific application scenarios. By using the minBarSize and maxBarSize properties you can adjust the size of a single bar within the series. The properties accept values in device independent pixels. These properties define boundaries for the size of a bar.

Example

The following definition represents the data context that will be used to populate the Bar series with data:

get categoricalSource() {
    return [
        { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24 },
        { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25 },
        { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23 },
        { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24 },
        { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21 }
    ]
}

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

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

export function onPageLoaded(args){
    var page = args.object;
    page.bindingContext = new dataModelModule.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-pro-ui/chart" xmlns="http://www.nativescript.org/tns.xsd">
    <chart:RadCartesianChart id="cartesianChart">
        <chart:RadCartesianChart.series>
            <chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">

                <chart:BarSeries.horizontalAxis>
                    <chart:CategoricalAxis/>
                </chart:BarSeries.horizontalAxis>
                <chart:BarSeries.verticalAxis>
                    <chart:LinearAxis/>
                </chart:BarSeries.verticalAxis>
            </chart:BarSeries>
        </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 bars to vertical.

Cartesian chart: Bar series Cartesian chart: 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: