Area Chart in .NET MAUI Cartesian Chart

10 Jul 20268 minutes to read

Area Chart

The area chart is rendered by using a collection of line segments connected to form a closed loop area, filled with the specified color. To render an area chart, create an instance of AreaSeries and add it to the Series collection property of the chart.

NOTE

The Cartesian chart has Series as its default content.

NOTE

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

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

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

    <chart:AreaSeries ItemsSource="{Binding Data}"
                      XBindingPath="Demand"
                      YBindingPath="Year2010"/>  

</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

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

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

AreaSeries series = new AreaSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Demand",
    YBindingPath = "Year2010",
};

chart.Series.Add(series);
this.Content = chart;

Area chart type in .NET MAUI Cartesian Chart

Spline Area Chart

The SplineAreaSeries connects a series of data points using smooth bezier curves, with the underlying area filled. It supports the same marker and customization options as AreaSeries. To change the curve behavior, set the SplineType property (Natural, Cardinal, Clamped, or Monotonic). Its default value is Natural.

<chart:SfCartesianChart>

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

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
            
    <chart:SplineAreaSeries ItemsSource="{Binding Data}"
                            XBindingPath="Demand" 
                            YBindingPath="Year2010"/>  

</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

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

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

SplineAreaSeries series = new SplineAreaSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Demand",
    YBindingPath = "Year2010",
};

chart.Series.Add(series);
this.Content = chart;

Spline area chart type in .NET MAUI Cartesian Chart

Enable Marker

A marker, also known as a symbol, is used to determine or highlight the position of the data point. To enable markers in the series, set the ShowMarkers property to true.

<chart:SfCartesianChart>
    <!-- code omitted for brevity -->
    <chart:AreaSeries ItemsSource="{Binding Data}"
                      XBindingPath="Demand"
                      YBindingPath="Year2010"
                      ShowMarkers="True"/>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// code omitted for brevity
AreaSeries series = new AreaSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Demand",
    YBindingPath = "Year2010",
    ShowMarkers = true,
};

chart.Series.Add(series);
this.Content = chart;

Marker customization

To change the series marker appearance, set the MarkerSettings property to a new instance of ChartMarkerSettings. The following properties are used to customize marker appearance.

  • Type, of type ShapeType, describes the shape of the series marker. The default value of this property is ShapeType.Circle.
  • Stroke, of type Brush, indicates the brush used to paint the marker border.
  • StrokeWidth, of type double, indicates the width of the marker border.
  • Fill, of type Brush, indicates the color of the marker.
  • Width, of type double, indicates the width of the marker.
  • Height, of type double, indicates the height of the marker.
<chart:SfCartesianChart>
    <!-- code omitted for brevity -->
    <chart:AreaSeries ItemsSource="{Binding Data}"
                      XBindingPath="Demand"
                      YBindingPath="Year2010"
                      ShowMarkers="True">
        <chart:AreaSeries.MarkerSettings>
            <chart:ChartMarkerSettings Type="Diamond"
                                       Fill="Brown"
                                       Stroke="Black"
                                       StrokeWidth="1"
                                       Height="8"
                                       Width="8"/>
        </chart:AreaSeries.MarkerSettings>
    </chart:AreaSeries>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

// code omitted for brevity
ChartMarkerSettings chartMarker = new ChartMarkerSettings()
{
    Type = ShapeType.Diamond,
    Fill = Colors.Brown,
    Stroke = Colors.Black,
    StrokeWidth = 1,
    Height = 8,
    Width = 8
};

AreaSeries series = new AreaSeries()
{
    ItemsSource = new ViewModel().Data,
    XBindingPath = "Demand",
    YBindingPath = "Year2010",
    ShowMarkers = true,
    MarkerSettings = chartMarker
};

chart.Series.Add(series);
this.Content = chart;