NativeScript Core

RadChart Grid Styling

Styling the chart grid is done by using the corresponding customization properties exposed by the Grid object. Here is a list of the properties that can be used to customized:

Example

To better illustrate the Grid customization, we will show a code snippet where its properties have been used for customizing it:

<chart:RadCartesianChart.grid>
    <chart:RadCartesianChartGrid
        horizontalLinesVisible="true"
        verticalLinesVisible="true"
        horizontalStripLinesVisible="true"
        verticalStripLinesVisible="true"
        horizontalStrokeColor="#ffffcc80"
        verticalStrokeColor="#804d0026"
        horizontalStrokeWidth="2"
        verticalStrokeWidth="3"
        horizontalStripLineColor="#8059005c, #804d0026">
    </chart:RadCartesianChartGrid>
</chart:RadCartesianChart.grid>

This is how the chart looks like now:

iOS:

Axis styling

Android:

Axis styling

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.