🥳 NativeScript 6.0 is here! Learn all about it at our launch webinar.

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.