Stacked Column Chart in .NET MAUI Chart
27 Mar 20236 minutes to read
The stacked column chart represents data values in a stacked format, where the columns are stacked on each other to indicate the cumulative value of the data points.
To render a stacked column chart, create an instance of the StackingColumnSeries 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:CategoryAxis />
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis />
</chart:SfCartesianChart.YAxes>
<chart:StackingColumnSeries ItemsSource="{Binding Data}"
XBindingPath="Name"
YBindingPath="Value"
</chart:StackingColumnSeries>
<chart:StackingColumnSeries ItemsSource="{Binding Data1}"
XBindingPath="Name"
YBindingPath="Value"
</chart:StackingColumnSeries>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
CategoryAxis primaryAxis = new CategoryAxis();
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
StackingColumnSeries series = new StackingColumnSeries()
{
XBindingPath = "Name",
YBindingPath = "Value",
ItemsSource = new ViewModel().Data
};
StackingColumnSeries series1 = new StackingColumnSeries()
{
XBindingPath = "Name",
YBindingPath = "Value",
ItemsSource = new ViewModel().Data1
};
chart.Series.Add(series);
chart.Series.Add(series1);
this.Content = chart;
Grouping Series
Each series in a stacked chart with several series may be difficult to compare. To solve that problem, grouping is used.
The GroupingLabel property used to group the series, which allows users to assign a label to each stacked column series. This label identifies the specific group to which the stacked column series belongs and can be used to group similar series.
NOTE
If the GroupingLabel is not provided, the stacked column will consider all series as a single group.
<chart:SfCartesianChart>
....
<chart:StackingColumnSeries XBindingPath="Name"
YBindingPath="Value"
ItemsSource="{Binding Data}"
GroupingLabel="GroupOne"
</chart:StackingColumnSeries>
<chart:StackingColumnSeries XBindingPath="Name"
YBindingPath="Value"
ItemsSource="{Binding Data1}"
GroupingLabel="GroupTwo"
</chart:StackingColumnSeries>
<chart:StackingColumnSeries XBindingPath="Name"
YBindingPath="Value"
ItemsSource="{Binding Data2}"
GroupingLabel="GroupOne"
</chart:StackingColumnSeries>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();
CategoryAxis primaryAxis = new CategoryAxis();
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);
StackingColumnSeries series = new StackingColumnSeries()
{
XBindingPath = "Name",
YBindingPath = "Value",
ItemsSource = new ViewModel().Data,
GroupingLabel="GroupOne"
};
StackingColumnSeries series1 = new StackingColumnSeries()
{
XBindingPath = "Name",
YBindingPath = "Value",
ItemsSource = new ViewModel().Data1,
GroupingLabel="GroupTwo"
};
StackingColumnSeries series = new StackingColumnSeries()
{
XBindingPath = "Name",
YBindingPath = "Value",
ItemsSource = new ViewModel().Data2,
GroupingLabel="GroupOne"
};
chart.Series.Add(series);
chart.Series.Add(series1);
this.Content = chart;
Appearance customization
-
Spacing of the
Double
type is used to change the spacing between two segments. The default spacing value is 0, ranging from 0 to 1. -
Width of the
Double
type is used to change the width of the rectangle. The default value of the width is 0.8, and the value ranges from 0 to 1. -
CornerRadius of the type
CornerRadius
, indicates the rounded corner for the stacked column. -
Stroke of the type
Brush
indicates the brush used to paint the border of the stacked column. -
StrokeWidth of the type
Double
indicates the width of the stacked segment.