Articles in this section
Category / Section

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>
 

       

Xamarin.Forms chart show both axis gridlines

 

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

       

 

Xamarin.Forms chart show any of the axis gridlines

<chart:SfChart.PrimaryAxis>
                <chart:NumericalAxis  ShowMajorGridLines="False"  />
            </chart:SfChart.PrimaryAxis>
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis  ShowMajorGridLines="False" />
            </chart:SfChart.SecondaryAxis>

 

 

 

Xamarin.Forms chart show without  axis gridlines

 

 

 

 

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



See also

How to change the appearance of the gridline in Xamarin.Forms Charts

How to customize the tick lines in Xamarin.Forms Charts

How to inverse the axis in Xamarin.Forms Charts

How to customize the individual axis elements in Xamarin.Forms Charts

How to place the axes at the opposite side in Xamarin.Forms Charts

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied