Grid lines in .NET MAUI Polar Chart

15 Jul 20266 minutes to read

Major grid lines

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

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the SfPolarChart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

<chart:SfPolarChart>
    <chart:SfPolarChart.PrimaryAxis>
        <chart:NumericalAxis ShowMajorGridLines = "False"/>
    </chart:SfPolarChart.PrimaryAxis>

    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis/>
    </chart:SfPolarChart.SecondaryAxis>
    <!-- code omitted for brevity -->
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
NumericalAxis primaryAxis = new NumericalAxis();
primaryAxis.ShowMajorGridLines = false;
chart.PrimaryAxis = primaryAxis;

NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

this.Content = chart;

Customization

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

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:SfPolarChart.Resources>
        <DoubleCollection x:Key = "dashArray">
            <x:Double>3</x:Double>
            <x:Double>3</x:Double>
        </DoubleCollection>
    </chart:SfPolarChart.Resources>

    <chart:SfPolarChart.PrimaryAxis>
        <chart:NumericalAxis>
            <chart:NumericalAxis.MajorGridLineStyle>
                <chart:ChartLineStyle StrokeDashArray = "{StaticResource dashArray}" Stroke = "Black" StrokeWidth = "2"/>
            </chart:NumericalAxis.MajorGridLineStyle>
        </chart:NumericalAxis>
    </chart:SfPolarChart.PrimaryAxis>

    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis/>
    </chart:SfPolarChart.SecondaryAxis>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
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.PrimaryAxis = primaryAxis;

NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

this.Content = chart;

Minor grid lines

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

<chart:SfPolarChart>
    <chart:SfPolarChart.PrimaryAxis>
        <chart:NumericalAxis/>
    </chart:SfPolarChart.PrimaryAxis>

    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis MinorTicksPerInterval = "3"/>
    </chart:SfPolarChart.SecondaryAxis>
    <!-- code omitted for brevity -->
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();

NumericalAxis primaryAxis = new NumericalAxis();
chart.PrimaryAxis = primaryAxis;

NumericalAxis secondaryAxis = new NumericalAxis()
{
    MinorTicksPerInterval = 3
};
chart.SecondaryAxis = secondaryAxis;
// code omitted for brevity
this.Content = chart;

Customization

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

<chart:SfPolarChart>
    <!-- code omitted for brevity -->
    <chart:SfPolarChart.Resources>
        <DoubleCollection x:Key = "dashArray">
            <x:Double>3</x:Double>
            <x:Double>3</x:Double>
        </DoubleCollection>
    </chart:SfPolarChart.Resources>

    <chart:SfPolarChart.PrimaryAxis>
        <chart:NumericalAxis/>
    </chart:SfPolarChart.PrimaryAxis>

    <chart:SfPolarChart.SecondaryAxis>
        <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:SfPolarChart.SecondaryAxis>
    <!-- code omitted for brevity -->
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
DoubleCollection doubleCollection = new DoubleCollection();
doubleCollection.Add(3);
doubleCollection.Add(3);

NumericalAxis primaryAxis = new NumericalAxis();
chart.PrimaryAxis = primaryAxis;

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

this.Content = chart;