Chart: Grid

In this article, you will learn how to display the grid lines in Telerik Chart for NativeScript.

RadCartesianChartGrid

The RadCartesianChartGrid represents a decoration over the plot area of RadCartesianChart. Adds major and minor lines, connected to each Major and Minor tick of each axis. You can set a new grid using the grid property in your chart instance.

<navigation:ExamplePage xmlns:navigation="navigation/example-page" loaded="onPageLoaded" xmlns:chart="nativescript-pro-ui/chart" xmlns="http://www.nativescript.org/tns.xsd">
    <chart:RadCartesianChart id="cartesianChart">
    <chart:RadCartesianChart.grid>
                <chart:RadCartesianChartGrid
                    horizontalLinesVisible="true"
                    verticalLinesVisible="true"
                    horizontalStripLinesVisible="true"
                    verticalStripLinesVisible="true"
                    verticalStrokeColor="#804d0026"
                    horizontalStrokeColor="#ffffcc80"
                    horizontalStrokeWidth="2"
                    verticalStrokeWidth="3"      
                    horizontalStripLineColor="#8059005c, #804d0026"
                    />
           </chart:RadCartesianChart.grid>           

        <chart:RadCartesianChart.series>
            <chart:BarSeries items="{{ categoricalSource }}" categoryProperty="Country" valueProperty="Amount">

            </chart:BarSeries>
            <chart:RadCartesianChart.horizontalAxis>
            <chart:CategoricalAxis />
            </chart:RadCartesianChart.horizontalAxis>
            <chart:RadCartesianChart.verticalAxis>
                <chart:LinearAxis />
            </chart:RadCartesianChart.verticalAxis>
        </chart:RadCartesianChart.series>
    </chart:RadCartesianChart>
</navigation:ExamplePage>

Features

Horizontal and Vertical Stroke color

RadCartesianChartGrid offers the possibility to change the vertical and horizontal strokes colors. To modify the values use the horizontalStrokeColor and verticalStrokeColor properties.

Horizontal and Vertical Strip line color

RadCartesianChartGrid offers the possibility to change the vertical and horizontal strip lines color. To modify the values use the horizontalStripLineColor and verticalStripLineColor properties.

Horizontal and Vertical Stroke width

Just like the Stroke color, RadCartesianChartGrid offers the possibility to change the vertical and horizontal stroke widths. To modify the values use the horizontalStrokeWidth and verticalStrokeWidth properties.

Horizontal and Vertical lines visibility

RadCartesianChartGrid offers the possibility to change the vertical and horizontal lines visibility. To show or hide the lines modify the horizontalLinesVisible and verticalLinesVisible properties.

Horizontal and Vertical strip lines visibility

RadCartesianChartGrid offers the possibility to change the vertical and horizontal strip lines visibility. To show or hide the lines modify the horizontalStripLinesVisible and verticalStripLinesVisible properties.

References

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