Step Area Chart in .NET MAUI Chart
29 Oct 20246 minutes to read
Step Area Chart
The step area chart displays data that changes over time or across different categories.
In a step area chart, the data points are connected by horizontal and vertical lines to create a series of steps. Each step represents a specific time interval or category. The area between the steps is then filled with a color or shading. To render an area chart, create an instance of StepAreaSeries, and add it to the Series collection property of the SfCartesianChart.
NOTE
The Cartesian chart has Series as its default content.
<chart:SfCartesianChart>
<chart:SfCartesianChart.XAxes>
<chart:DateTimeAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:StepAreaSeries ItemsSource="{Binding Data}"
XBindingPath="Month"
YBindingPath="Value"/>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
DateTimeAxis primaryAxis = new DateTimeAxis();
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
StepAreaSeries series = new StepAreaSeries()
{
ItemsSource = new ViewModel().Data,
XBindingPath = "Month",
YBindingPath = "Value",
};
chart.Series.Add(series);
this.Content = chart;
Enable Marker
A marker, also known as a symbol, determines or highlights the data point’s position. To enable markers in the series, set the ShowMarkers property to true.
<chart:SfCartesianChart>
...
<chart:StepAreaSeries ItemsSource="{Binding Data}"
XBindingPath="Month"
YBindingPath="Value"
ShowMarkers="True"/>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
...
StepAreaSeries series = new StepAreaSeries()
{
ItemsSource = new ViewModel().Data,
XBindingPath = "Month",
YBindingPath = "Value",
ShowMarkers= true,
};
chart.Series.Add(series);
this.Content= chart;
Marker customization
To change the series markers appearance, create an instance of the MarkerSettings property. 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>
...
<chart:StepAreaSeries XBindingPath="Month"
YBindingPath="Value"
ItemsSource="{Binding Data}"
ShowMarkers="True">
<chart:StepAreaSeries.MarkerSettings>
<chart:ChartMarkerSettings Type="Diamond"
Fill="Brown"
Stroke="Black"
StrokeWidth="1"
Height="8"
Width="8"/>
</chart:StepAreaSeries.MarkerSettings>
</chart:StepAreaSeries>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
...
ChartMarkerSettings chartMarker= new ChartMarkerSettings()
{
Type = ShapeType.Diamond,
Fill = Colors.Brown,
Stroke = Colors.Black,
StrokeWidth = 1,
Height = 8,
Width = 8
};
StepAreaSeries series = new StepAreaSeries()
{
XBindingPath = "Month",
YBindingPath = "Value",
ItemsSource = new ViewModel().Data,
ShowMarkers = true,
MarkerSettings = chartMarker
};
chart.Series.Add(series);
this.Content = chart;