public class AreaSeries : XYDataSeries, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent, IDrawCustomLegendIcon, IMarkerDependent

Remarks

To render a series, create an instance of AreaSeries class, and add it to the Series collection.

It provides options for Fill, PaletteBrushes, StrokeWidth, Stroke, and Opacity to customize the appearance.

EnableTooltip - A tooltip displays information while tapping or mouse hovering above a segment. To display the tooltip on a chart, you need to set the EnableTooltip property as true in AreaSeries class, and also refer TooltipBehavior property.

Data Label - Data labels are used to display values related to a chart segment. To render the data labels, you need to set the ShowDataLabels property as true in AreaSeries class. To customize the chart data labels alignment, placement, and label styles, you need to create an instance of CartesianDataLabelSettings and set to the DataLabelSettings property.

Animation - To animate the series, set True to the EnableAnimation property.

LegendIcon - To customize the legend icon using the LegendIcon property.

Examples

    <chart:SfCartesianChart>

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

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

          <chart:SfCartesianChart.Series>
              <chart:AreaSeries
                  ItemsSource="{Binding Data}"
                  XBindingPath="XValue"
                  YBindingPath="YValue"/>
          </chart:SfCartesianChart.Series>  

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis xAxis = new NumericalAxis();
    NumericalAxis yAxis = new NumericalAxis();

    chart.XAxes.Add(xAxis);
    chart.YAxes.Add(yAxis);

    ViewModel viewModel = new ViewModel();

    AreaSeries series = new AreaSeries();
    series.ItemsSource = viewModel.Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    chart.Series.Add(series);

    public ObservableCollection<Model> Data { get; set; }

    public ViewModel()
    {
       Data = new ObservableCollection<Model>();
       Data.Add(new Model() { XValue = 10, YValue = 100 });
       Data.Add(new Model() { XValue = 20, YValue = 150 });
       Data.Add(new Model() { XValue = 30, YValue = 110 });
       Data.Add(new Model() { XValue = 40, YValue = 230 });
    }

Constructors

AreaSeries()

Initializes a new instance of the AreaSeries class.

Declaration

public AreaSeries()

Fields

MarkerSettingsProperty

Identifies the MarkerSettings bindable property.

Declaration

public static readonly BindableProperty MarkerSettingsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Defines customization of the marker appearance for the area series.

ShowMarkersProperty

Identifies the ShowMarkers bindable property.

Declaration

public static readonly BindableProperty ShowMarkersProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Determines whether to show markers on the area series.

StrokeDashArrayProperty

Identifies the StrokeDashArray bindable property.

Declaration

public static readonly BindableProperty StrokeDashArrayProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Defines the dash array for the stroke of the area series.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

Defines the stroke brush used for the area series.

Properties

MarkerSettings

Gets or sets the option for customize the series markers.

Declaration

public ChartMarkerSettings MarkerSettings { get; set; }

Property Value

Type	Description
ChartMarkerSettings	It accepts ChartMarkerSettings values.

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:AreaSeries ItemsSource="{Binding Data}"
                           XBindingPath="XValue"
                           YBindingPath="YValue"
                           ShowMarkers="True">
              <chart:AreaSeries.MarkerSettings>
                    <chart:ChartMarkerSettings Fill="Red" Height="15" Width="15" />
              </chart:AreaSeries.MarkerSettings>
         </chart:AreaSeries>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

   ChartMarkerSettings chartMarkerSettings = new ChartMarkerSettings()
    {
       Fill = new SolidColorBrush(Colors.Red),
       Height = 15,
       Width = 15,
    };
    AreaSeries series = new AreaSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          ShowMarkers= true,
          MarkerSettings= chartMarkerSettings,
    };

    chart.Series.Add(series);

ShowMarkers

Gets or sets the value indicating whether to show markers for the series data point.

Declaration

public bool ShowMarkers { get; set; }

Property Value

Type	Description
System.Boolean	It accepts `bool` values and its default value is false.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:AreaSeries ItemsSource="{Binding Data}"
                           XBindingPath="XValue"
                           YBindingPath="YValue"
                           ShowMarkers="True"/>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    AreaSeries series = new AreaSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          ShowMarkers= true,
    };

    chart.Series.Add(series);

Stroke

Gets or sets a value to customize the border appearance of the area series.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	It accepts Microsoft.Maui.Controls.Brush values and its default value is null.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:AreaSeries ItemsSource="{Binding Data}"
                           XBindingPath="XValue"
                           YBindingPath="YValue"
                           Stroke = "Red" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    AreaSeries series = new AreaSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          Stroke = new SolidColorBrush(Colors.Red),
    };

    chart.Series.Add(series);

StrokeDashArray

Gets or sets the stroke dash array to customize the appearance of stroke.

Declaration

public DoubleCollection StrokeDashArray { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DoubleCollection	It accepts the Microsoft.Maui.Controls.DoubleCollection value and the default value is null.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:AreaSeries ItemsSource="{Binding Data}"
                           XBindingPath="XValue"
                           YBindingPath="YValue"
                           StrokeDashArray="5,3"
                           Stroke = "Red" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    DoubleCollection doubleCollection = new DoubleCollection();
    doubleCollection.Add(5);
    doubleCollection.Add(3);
    AreaSeries series = new AreaSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          StrokeDashArray = doubleCollection,
          Stroke = new SolidColorBrush(Colors.Red),
    };

    chart.Series.Add(series);

Methods

CreateSegment()

Creates and initializes a new chart segment for the chart.

Declaration

protected override ChartSegment CreateSegment()

Returns

Type
ChartSegment

Overrides

ChartSeries.CreateSegment()

DrawMarker(ICanvas, Int32, ShapeType, Rect)

Draws the markers for the area series at each data point location on the chart.

Declaration

protected virtual void DrawMarker(ICanvas canvas, int index, ShapeType type, Rect rect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
System.Int32	index
ShapeType	type
Microsoft.Maui.Graphics.Rect	rect

GetDataPointIndex(Single, Single)

Retrieves the index of a specific data point within a chart series, typically based on the interaction or coordinates on the chart.

Declaration

public override int GetDataPointIndex(float pointX, float pointY)

Parameters

Type	Name	Description
System.Single	pointX
System.Single	pointY

Returns

Type
System.Int32

Overrides

ChartSeries.GetDataPointIndex(Single, Single)