How to set area border color for .NET MAUI Cartesian Chart?

In .NET MAUI SfCartesianChart, the PlotAreaBackgroundView property allows you to customize the visual appearance of the chart’s plot area. This can be achieved in two ways: by applying a border color or by incorporating custom graphics.

Step 1: Initialize the SfCartesianChart in .NET MAUI. For detailed steps, please refer to the documentation.

[XAML]

<chart:SfCartesianChart>

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

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

    <chart:ColumnSeries ItemsSource="{Binding Data}"
                        Fill="CadetBlue"
                        XBindingPath="Name" 
                        YBindingPath="Height">
    </chart:ColumnSeries>

</chart:SfCartesianChart>

Method 1: Using Border to Set Area Border Color

Use the PlotAreaBackgroundView with a Border element to define a simple, solid border around the chart’s plot area.

[XAML]

<chart:SfCartesianChart>

    <chart:SfCartesianChart.PlotAreaBackgroundView>
        <Border Stroke="Orange" StrokeThickness="5"></Border>
    </chart:SfCartesianChart.PlotAreaBackgroundView>

    . . .

</chart:SfCartesianChart>

This approach is ideal for simple use cases where you want to visually separate the chart area using a colored border.

Method 2: Using GraphicsView with Custom Drawable

For more advanced visuals—such as dashed lines, gradients, or dynamic effects—you can use a GraphicsView with a custom IDrawable.

Step 1: Create a Custom Drawable.

[C#]

public class CustomBorderDrawable : IDrawable
{
    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.StrokeColor = Colors.Orange;
        canvas.StrokeSize = 10;
        canvas.DrawRectangle(dirtyRect);
    }
}

Step 2: Register Drawable in XAML Resources.

[XAML]

ContentPage.Resources>
    <model:CustomBorderDrawable x:Key="CustomDrawable" />
</ContentPage.Resources>

Step 3: Use GraphicsView in PlotAreaBackgroundView.

[XAML ]:

<chart:SfCartesianChart>

    <chart:SfCartesianChart.PlotAreaBackgroundView>
        <GraphicsView Drawable="{StaticResource CustomDrawable}" />
    </chart:SfCartesianChart.PlotAreaBackgroundView>

    . . .

</chart:SfCartesianChart>

This method gives you full control over how the border is rendered, including custom shapes.

Output

Explore the runnable demo from this GitHub location.

Conclusion

I hope you enjoyed learning how to set area border color for .NET MAUI Cartesian Chart.
You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!