NativeScript & Vue.JS

Chart Grid

If you followed the getting started article, you now know how to create a chart and add it to a NativeScript page. In this article, you will learn how to control the grid lines and stripes that can be drawn behind the Chart Series.

Getting Started

The grid lines and the stripes between them are controlled by the RadCartesianChartGrid element. It represents a decoration over the plot area of RadCartesianChart drawn behind the series. The lines connect the ticks of each axis and the stripes are the area between them. You can set a new grid by declaring an RadCartesianChartGrid and setting the tkCartesianGrid directive on the instance.

Properties

To better illustrate the Grid capabilities, let's add the following properties to the grid:

Example 1: Grid Styling

export default {
  name: 'StylingGrid',
  description: description,
  template: `
  <Page>
    <ActionBar :title="title">
      <NavigationButton text="Back" android.systemIcon="ic_menu_back" @tap="onNavigationButtonTap"></NavigationButton>
    </ActionBar>
    <RadCartesianChart>
      <RadCartesianChartGrid v-tkCartesianGrid
        horizontalLinesVisible="true"
        verticalLinesVisible="true"
        horizontalStripLinesVisible="true"
        verticalStripLinesVisible="true"
        horizontalStrokeColor="#ffffcc80"
        verticalStrokeColor="#804d0026"
        horizontalStrokeWidth="2"
        verticalStrokeWidth="3"
        horizontalStripLineColor="#8059005c, #804d0026">
      </RadCartesianChartGrid>

      <BarSeries v-tkCartesianSeries :items="items" categoryProperty="Country" valueProperty="Amount"></BarSeries>

      <CategoricalAxis v-tkCartesianHorizontalAxis></CategoricalAxis>
      <LinearAxis v-tkCartesianVerticalAxis></LinearAxis>
    </RadCartesianChart>
  </Page>
  `,
  data () {
    return {
      title: description,
      items: getCountriesData(),
    };
  },
  methods: {
    onNavigationButtonTap() {
      Frame.topmost().goBack();
    },
  },
};

Figure 1: Chart with a customized grid on Android (left) and iOS (right)

Axis styling Cartesian chart: Bar series

References

Want to see this scenario in action? Check our SDK Examples repository on GitHub. You will find this and many other practical examples with NativeScript UI.

Examples used in this article:

Related articles you might find useful: