RadChart: Getting Started

In this article, you will learn to get started with Telerik Chart for NativeScript: how to initialize the chart, how to create the data series and how to use the different axes.

Make sure you have the Progress NativeScript UI Pro installed to be able to use Chart for NativeScript.

DataModel

Let's start with the DataModel that we will use for our RadChart instance. We will create a basic Data Model that will contain a collection of objects, which will have two properties that will be used by the chart to provide intuitive data visualization.

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 }
    ]
}

RadChart Initialization

We will start by creating a new page where we will put the RadChart instance. First we will need to ensure that the Chart will be able to show any data, so we will create a page loaded event handler that will set the page's binding context.

We need to add the xml namespace for using Telerik Chart for NativeScript. Let's define the namespace as chart and set it's path to the component plugin: nativescript-telerik-ui-pro/chart.

The next step is to add the chart to the page. In this case we will use the RadCartesianChart type.

Charts must be put in a parent layout panel that does not require from its children to have their own desired size. You should not therefore put your chart in a StackLayout or an auto-sized row within a GridLayout.

After adding the chart to the page we need to add the series we will use in order to show the chart. In this case we will use the LineSeries in combination with a Categorical and a Linear axes. We set the categoryProperty of the series to the Country property in the objects from our data model and the valueProperty to the Amount property.
Then we set the horizontalAxis to an instance of a CategoricalAxis and the verticalAxis to an instance of a LinearAxis.

<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 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>

This will produce a page showing a Chart that will look like:

TelerikUI-Chart-Getting-Started TelerikUI-Chart-Getting-Started

References

Want to see more examples using RadCartesianChart?
Check our SDK examples repository on GitHub. You will find this and a lot more practical examples with NativeScript UI.