We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to remove the axis gridlines from Xamarin.Forms Charts

Platform: Xamarin.Forms |
Control: SfChart |
Published Date: October 29, 2015 |
Last Revised Date: March 15, 2021

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

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Narasimha Murthy
Jun 14, 2018

Is there a way to force display all grid lines for Primary axes? 

Reply
Divya Venkatesan [Syncfusion]
Jun 14, 2018

Hi Narasimha,

 

You can show the all the gridLines by setting the ShowMajorGridLines property of axis as true.

 

Code snippets[Xaml]:

<chart:SfChart.PrimaryAxis>

    <chart:CategoryAxis ShowMajorGridLines="True"/>

</chart:SfChart.PrimaryAxis>

 

Code snippets[C#]:

Chart.PrimaryAxis.ShowMajorGridLines = true;

 

Regards,

Divya Venkatesan

 

Codrina Merigo
Nov 26, 2018

Is there a way to see the gridlines(both major and minor) over an area chart ?

Reply
Michael Prabhu M [Syncfusion]
Nov 27, 2018

Hi Codrina,

 

We would like to inform you that the gridlines are always rendered first, so that series will always be over the grid lines. If you want to show all the gridLines of AreaSeries, then you have to use the opacity property which is available in ChartSeries. Please refer the below code snippet and let us know whether this fulfills your requirement.

 

Code snippet[Xaml]:

<chart:SfChart.PrimaryAxis>

      <chart:NumericalAxis ShowMajorGridLines="True" ShowMinorGridLines="True" MinorTicksPerInterval="1">

        <chart:NumericalAxis.MajorGridLineStyle>

           <chart:ChartLineStyle StrokeColor="Black" />

        </chart:NumericalAxis.MajorGridLineStyle>

        <chart:NumericalAxis.MinorGridLineStyle>

           <chart:ChartLineStyle StrokeColor="Black" />

        </chart:NumericalAxis.MinorGridLineStyle>

     </chart:NumericalAxis>

</chart:SfChart.PrimaryAxis>

 

<chart:SfChart.Series>

    <chart:AreaSeries Color="Cyan" StrokeColor="Blue" Opacity="0.3" ItemsSource="{Binding Data1}" XBindingPath="XValue" YBindingPath="YValue" EnableTooltip="True">

      <chart:AreaSeries.DataMarker>

           <chart:ChartDataMarker/>

      </chart:AreaSeries.DataMarker>

   </chart:AreaSeries>

</chart:SfChart.Series>

 


Codrina Merigo
Nov 27, 2018

Thank you for your reply, but I was thinking to create a white atep area chart to cover some data. This is why I was asking for the gridlines to be visible.

 My requirement is to create a "stepped" area chart with minimum and maximum - like a range area chart but rendered with steps both up and down - is this kind of chart possible ? Thank you.

Reply
Michael Prabhu M [Syncfusion]
Nov 28, 2018

Hi Codrina,

 

You can achieve this requirement by adding the two StepLineSeries in chart. Please refer the below code snippet and also, we have attached the prepared sample for your reference.

 

Sample: 5520_kb

 

Code snippet[XAML]

<chart:StepLineSeries Color="Blue" ItemsSource="{Binding Data1}" XBindingPath="XValue" YBindingPath="YValue" EnableTooltip="True">                   

</chart:StepLineSeries>

 

<chart:StepLineSeries Color="Blue" ItemsSource="{Binding Data2}" XBindingPath="XValue" YBindingPath="YValue" EnableTooltip="True">

</chart:StepLineSeries>

 

 

Codrina Merigo
Nov 28, 2018

Thank you for your quick reply. In my scenario I have also a line series and the are between the steps represents a range:

               <chart:StepLineSeries Color="Blue" ItemsSource="{Binding Data1}" XBindingPath="XValue" YBindingPath="YValue" EnableTooltip="True">                    

                </chart:StepLineSeries>

                <chart:StepLineSeries Color="Blue" ItemsSource="{Binding Data2}" XBindingPath="XValue" YBindingPath="YValue" EnableTooltip="True">

                </chart:StepLineSeries>

                <chart:LineSeries Color="Red" ItemsSource="{Binding Data2}" XBindingPath="XValue" YBindingPath="YValue" EnableTooltip="True">

                </chart:LineSeries>


I also need to see both minor and major gridlines.

Is it possible to color the blue area somehow  as below ?



Reply
Codrina Merigo
Dec 04, 2018

Hi,

Are there any news on this issue ? 

Thank you very much

Michael Prabhu M [Syncfusion]
Dec 05, 2018

Hi Codrina,

 

We have achieved this requirement by using RangeAreaSeries and displaying it like a step area series by adding datapoints in intermediate positions. For that we have created a method, you can use that method to convert datapoints to display like StepAreaSeries. Please refer the below code snippet.

 

Code snippet [C#]

private void ConvertDataToStepChartData(ObservableCollection<Model> data)

{

   Data2.Add(data[0]);

 

   for(int i = 1; i < data.Count; i++)

   {

    Data2.Add(new Model(data[i].XValue, data[i - 1].High, data[i  -1].Low));

     Data2.Add(data[i]);

   }

}

 

We have prepared a simple sample for your requirement and it can be downloaded from the below link.

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/5520_sample1345624951.zip

 

Regards,

Michael

 

Codrina Merigo
Dec 06, 2018

Thank you very much for the sample and the solution!

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile