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
Properties
References

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

verticalLinesVisible - Determines whether the grid lines associated with the vertical axis will be visible.
horizontalLinesVisible - Determines whether the grid lines associated with the horizontal axis will be visible.
verticalStripLinesVisible - Determines whether the alternating fills between the vertical grid lines are visible or not.
horizontalStripLinesVisible - Determines whether the alternating fills between the horizontal grid lines are visible or not.
verticalStrokeWidth - Determines the width of the stroke used to paint the vertical grid lines.
horizontalStrokeWidth - Determines the width of the stroke used to paint the horizontal grid lines.
verticalStrokeColor - Determines the color used to draw the vertical lines of the grid.
horizontalStrokeColor - Determines tthe color used to draw the horizontal lines of the grid.
verticalStripLineColor - Determines the color used to paint the fills between the vertical grid lines.
horizontalStripLineColor - Determines the color used to paint the fills between the horizontal grid lines.

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:

Styling Grid Example

NativeScript & Vue.JS