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:
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- gets or sets the color used to draw the vertical lines of the grid
horizontalStrokeColor- gets or sets the 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 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:
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.