)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show/hide grid lines?

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

You can show or hide the major and minor grid lines of a chart axis using the ShowMajorGridLines and ShowMinorGridLines properties of the respective axis. The default value of these properties is true.

XAML

 

C#

 

Output

C:\Users\yuvaraj.palanisamy\Pictures\android2.png

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:

                                   

               

               

               

               

               


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 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
Live Chat Icon