🎟️ Grab your ticket for NativeScript Developer Day! Coming in April to Amsterdam. Learn more here.

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"
                verticalStrokeColor="#804d0026"
                horizontalStrokeColor="#ffffcc80"
                horizontalStrokeWidth="2"
                verticalStrokeWidth="3"      
                horizontalStripLineColor="#8059005c, #804d0026"
                />
       </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.