NativeScript Core

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.


Run the following command to add the plugin to your application:

tns plugin add nativescript-ui-chart


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 }


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.

Then, in order to add a RadCartesianChart instance in a page of your application, you need to define the following XML namespace:

  • xmlns:chart="nativescript-ui-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-ui-chart" xmlns="">
    <chart:RadCartesianChart id="cartesianChart">
            <chart:LineSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">

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

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


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.