NativeScript Angular

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.


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 NativeScriptUIChartModule from the nativescript-ui-chart plugin has been imported in an ngModule in your app. For example:

import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
    schemas: [NO_ERRORS_SCHEMA],
    imports: [
    declarations: [
export class ChartExamplesModule { }


Let's start with the Component in which we will place our RadChart instance. We create a basic angular Component that contains a collection of objects provided by an custom service, which has two properties that will be used by the chart to provide intuitive data visualization.

The service is a simple 'mock' of an backend call that will return an array of objects:

import { Injectable } from '@angular/core';

export class DataService {

Inside that service we have a single function which returns an array:

getCategoricalSource(): Country[] {
    return [
        { 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 }
export class Country {
    constructor(public Country?: string, public Amount?: number, public SecondVal?: number, public ThirdVal?: number, public Impact?: number, public Year?: number) {

RadChart Initialization

The first step is to add the chart to the template of your Component. 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 we need to set the horizontalAxis to an instance of a CategoricalAxis and the verticalAxis to an instance of a LinearAxis. Following the same patter as with the series object we need to:

  • Declare the CategoricalAxis and LinearAxis between the RadCartesianChart open and close tags.
  • After that set the tkCartesianHorizontalAxis and tkCartesianVerticalAxis directive to the axes.

After the axes are set we need to add the series which we will show in the chart. In this case we will use the LineSeries in combination with a Categorical and a Linear axes.

  • First we need to declare the LineSeries between the RadCartesianChart open and close tags.
  • We set the categoryProperty of the series to the Country property in the objects from the categoricalSource array of the Component and the valueProperty to the Amount property.
  • Finally in order for angular to be able to relate the series object with the RadCartesianChart we need to set the tkCartesianSeries directive to the LineSeries.

The DataService and Country are custom modules used for example purposes so make sure you import them accordingly from your project's folder structure.

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../data-services/data.service';
import { Country } from '../../data-services/country';
import { ObservableArray } from "tns-core-modules/data/observable-array";

    selector: 'tk-chart-series-line',
    providers: [DataService],
    templateUrl: 'chart-series-line.component.html'
export class ChartSeriesLineComponent implements OnInit {
    private _categoricalSource: ObservableArray<Country>;

    constructor(private _dataService: DataService) { }

    get categoricalSource(): ObservableArray<Country> {
        return this._categoricalSource;

    ngOnInit() {
        this._categoricalSource = new ObservableArray(this._dataService.getCategoricalSource());
<RadCartesianChart tkExampleTitle tkToggleNavButton>
    <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
    <LinearAxis tkCartesianVerticalAxis></LinearAxis>
    <LineSeries tkCartesianSeries [items]="categoricalSource" categoryProperty="Country" valueProperty="Amount"></LineSeries>

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

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