RadChart: Getting Started

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

Installation

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

tns plugin add nativescript-ui-chart

Adding a RadCartesianChart to Your Component's template

Before proceeding, make sure that the nativescript-ui-chart/vue module is required inside your application. This module handles the registration of the custom directives and elements required by nativescript-vue.

const MyComponent = {
    template: `
        <Page>
            <RadCartesianChart>
                <LineSeries v-tkCartesianSeries :items="categoricalSource" categoryProperty="Country" valueProperty="Amount" />
                <CategoricalAxis v-tkCartesianHorizontalAxis />
                <LinearAxis v-tkCartesianVerticalAxis />
            </RadCartesianChart>
        </Page>
    `,
    created() {
        this.categoricalSource = new ObservableArray([
            { Country: "Germany", Amount: 15, SecondVal: 14, ThirdVal: 24, Impact: 0, Year: 0 },
            { Country: "France", Amount: 13, SecondVal: 23, ThirdVal: 25, Impact: 0, Year: 0 },
            { Country: "Bulgaria", Amount: 24, SecondVal: 17, ThirdVal: 23, Impact: 0, Year: 0 },
            { Country: "Spain", Amount: 11, SecondVal: 19, ThirdVal: 24, Impact: 0, Year: 0 },
            { Country: "USA", Amount: 18, SecondVal: 8, ThirdVal: 21, Impact: 0, Year: 0 }
        ]);
    },
    data() {
        return {
            categoricalSource: ""
        };
    }
}

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

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