Line series: overview

LineSeries are categorical type of series that represent the objects from the data source as dots connected with a line. To use Line series, you need to initialize a RadCartesianChart, define a CategoricalAxis and LinearAxis and bind the series to a set of data objects.

Example

The following definition represents the data context that will be used to populate the Line 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 Line 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 LineSeries 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:LineSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">

                <chart:LineSeries.horizontalAxis>
                    <chart:CategoricalAxis/>
                </chart:LineSeries.horizontalAxis>
                <chart:LineSeries.verticalAxis>
                    <chart:LinearAxis/>
                </chart:LineSeries.verticalAxis>
            </chart:LineSeries>
        </chart:RadCartesianChart.series>
    </chart:RadCartesianChart>
</navigation:ExamplePage>

Here's how your Line chart should look like:

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