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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to show/hide grid lines?

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

Article ID: Published Date: Last Revised Date: Platform: Control:
5520 10/29/2015 03/05/2018 Xamarin.Forms SfChart
Did you find this information helpful?
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
Add Comment
You must log in to leave a comment

Please sign in to access our KB

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

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