Grid Lines in .NET MAUI Chart

Major Grid Lines

By default, major gridlines are automatically added to the ChartAxis in its defined intervals. The visibility of the major gridlines can be controlled using the ShowMajorGridLines property. The default value of ShowMajorGridLines is true.

XAML

<chart:SfCartesianChart>
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis ShowMajorGridLines="False"/>
    </chart:SfCartesianChart.XAxes>
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    . . .
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis();
primaryAxis.ShowMajorGridLines = false;
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
. . .
this.Content = chart;

Customization

The MajorGridLineStyle property in the chart axis is used to customize the appearance of major gridlines.

XAML

<chart:SfCartesianChart>
    . . .
    <chart:SfCartesianChart.Resources>
        <DoubleCollection x:Key="dashArray">
            <x:Double>3</x:Double>
            <x:Double>3</x:Double>
        </DoubleCollection>
    </chart:SfCartesianChart.Resources>
    
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis>
            <chart:NumericalAxis.MajorGridLineStyle>
                <chart:ChartLineStyle StrokeDashArray="{StaticResource dashArray}"
                                      Stroke="Black"
                                      StrokeWidth="2"/>
            </chart:NumericalAxis.MajorGridLineStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
. . .
DoubleCollection doubleCollection = new DoubleCollection();
doubleCollection.Add(3);
doubleCollection.Add(3);

NumericalAxis primaryAxis = new NumericalAxis();
ChartLineStyle gridLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Black,
    StrokeWidth = 2,
    StrokeDashArray = doubleCollection,
};
primaryAxis.MajorGridLineStyle = gridLineStyle;
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

this.Content = chart;

Minor Grid Lines

Minor gridlines will be added automatically when the small tick lines is defined and using the MinorTicksPerInterval property of chart axis. The visibility of the minor gridlines can be controlled using the ShowMinorGridLines property. The default value of ShowMinorGridLines is true.

XAML

<chart:SfCartesianChart>
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis MinorTicksPerInterval="3"/>
    </chart:SfCartesianChart.YAxes>
    . . .
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

NumericalAxis primaryAxis = new NumericalAxis();
chart.XAxes.Add(primaryAxis);

chart.SecondaryAxis = new NumericalAxis()
{
    MinorTicksPerInterval = 3,
};
chart.YAxes.Add(secondaryAxis);
. . .
this.Content = chart;

Customization

The MinorGridLineStyle property in the chart axis is used to customize the appearance of minor gridlines.

XAML

<chart:SfCartesianChart>
    . . .
    <chart:SfCartesianChart.Resources>
        <DoubleCollection x:Key="dashArray">
            <x:Double>3</x:Double>
            <x:Double>3</x:Double>
        </DoubleCollection>
    </chart:SfCartesianChart.Resources>

    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis ShowMinorGridLines="True" MinorTicksPerInterval="2">
            <chart:NumericalAxis.MinorGridLineStyle>
                <chart:ChartLineStyle StrokeDashArray="{StaticResource dashArray}"
                                      Stroke="Black"
                                      StrokeWidth="0.8"/>
            </chart:NumericalAxis.MinorGridLineStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.YAxes>
    . . .
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
...
DoubleCollection doubleCollection = new DoubleCollection();
doubleCollection.Add(3);
doubleCollection.Add(3);

NumericalAxis primaryAxis = new NumericalAxis();
chart.XAxes.Add(primaryAxis);

NumericalAxis secondaryAxis = new NumericalAxis() { MinorTicksPerInterval = 2 };
ChartLineStyle gridLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Black,
    StrokeWidth = 0.8,
    StrokeDashArray = doubleCollection,
};
secondaryAxis.MinorGridLineStyle = gridLineStyle;
chart.YAxes.Add(secondaryAxis);

this.Content = chart;