🐦 Grab your early bird tickets for the next NativeScript conference! jsMobileConf is coming back to Boston.

NativeScript & Vue.JS

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 plugin is instaled in your main application file (usually main.js or main.ts). This plugin handles the registration of the custom directives and elements required by nativescript-vue.

import Vue from 'nativescript-vue';
import RadChart from 'nativescript-ui-chart/vue';

Vue.use(RadChart);

Now, you can use all the chart components and directives, as the RadCartesianChart, RadPieChart, etc. Look at this example component:

import { getCountriesData } from '../../data';

const description = 'Line Series';

export default {
  name: 'LineSeriesExample',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadCartesianChart>
      <CategoricalAxis v-tkCartesianHorizontalAxis />
      <LinearAxis v-tkCartesianVerticalAxis />
      <LineSeries v-tkCartesianSeries
                  :items="items"
                  categoryProperty="Country"
                  valueProperty="Amount" />
    </RadCartesianChart>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getCountriesData(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      frameModule.topmost().goBack();
    },
  },
};

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

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