Grid Lines in .NET MAUI Chart

10 Jan 20256 minutes to read

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; // Disable major grid lines for the primary axis
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();
// Define grid line style with black stroke, width, and dash pattern
ChartLineStyle gridLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Black,
    StrokeWidth = 2,
    StrokeDashArray = doubleCollection,
};
primaryAxis.MajorGridLineStyle = gridLineStyle; // Apply the grid line style to the primary axis
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()
{
    // Set the number of minor ticks per interval on the axis
    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 };
// Define the style for the minor grid lines on the Y-axis.
ChartLineStyle gridLineStyle = new ChartLineStyle()
{
    Stroke = Colors.Black,
    StrokeWidth = 0.8,
    StrokeDashArray = doubleCollection,
};
// Apply the grid line style to the minor grid lines of the secondary axis.
secondaryAxis.MinorGridLineStyle = gridLineStyle;
chart.YAxes.Add(secondaryAxis);

this.Content = chart;