How to remove the axis gridlines from Xamarin.Forms Charts

1 min read

This article explains how to hide the scale gridlines in Xamarin.Forms Charts. Both primary and secondary axis has a support to change the visibility of both Minor and Major axis line.

This grid lines customization has been achieved by handling the two properties:

ShowMajorGridLines - Controls the visibility of major grid lines.

Code changes	Output
<chart:SfChart.PrimaryAxis> <chart:NumericalAxis ShowMajorGridLines="True" /> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis ShowMajorGridLines="True" /> </chart:SfChart.SecondaryAxis>
<chart:SfChart.PrimaryAxis> <chart:NumericalAxis ShowMajorGridLines="True" /> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis ShowMajorGridLines="False" /> </chart:SfChart.SecondaryAxis>
<chart:SfChart.PrimaryAxis> <chart:NumericalAxis ShowMajorGridLines="False" /> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis ShowMajorGridLines="False" /> </chart:SfChart.SecondaryAxis>

MinorTicksPerInterval - Defines the number of minor ticks or grid lines to be drawn between the adjacent major ticks or grid lines, respectively.

Code changes

Output

<xforms:SfChart.PrimaryAxis>
                <xforms:NumericalAxis/>
            </xforms:SfChart.PrimaryAxis>
            <xforms:SfChart.SecondaryAxis>
                <xforms:NumericalAxis MinorTicksPerInterval="2" ShowMinorGridLines="True"/>
            </xforms:SfChart.SecondaryAxis>

Xamarin.Forms chart show only any of axis gridlines

<xforms:SfChart.PrimaryAxis>
                <xforms:NumericalAxis MinorTicksPerInterval="2" ShowMinorGridLines="True"/>
            </xforms:SfChart.PrimaryAxis>
            <xforms:SfChart.SecondaryAxis>
                <xforms:NumericalAxis MinorTicksPerInterval="2" ShowMinorGridLines="True"/>
            </xforms:SfChart.SecondaryAxis>

Xamarin.Forms chart show both axis gridlines

Did you find this information helpful?

Yes

Comments

How to remove the axis gridlines from Xamarin.Forms Charts

Access denied