Stacked Column Chart in .NET MAUI Cartesian Chart

10 Jul 20266 minutes to read

Stacked Column Chart

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

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.

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 Data1}"
                                XBindingPath="Name"
                                YBindingPath="Value"/>        

    <chart:StackingColumnSeries ItemsSource="{Binding Data2}"
                                XBindingPath="Name"
                                YBindingPath="Value"/>         
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

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

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

StackingColumnSeries series1 = new StackingColumnSeries()
{
    ItemsSource = new ViewModel().Data1,
    XBindingPath = "Name",
    YBindingPath = "Value",
};

StackingColumnSeries series2 = new StackingColumnSeries()
{
    ItemsSource = new ViewModel().Data2,
    XBindingPath = "Name",
    YBindingPath = "Value",
};

chart.Series.Add(series1);
chart.Series.Add(series2);
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 is 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>
    <!-- code omitted for brevity -->
    <chart:StackingColumnSeries ItemsSource="{Binding Data1}"
                                XBindingPath="Name"
                                YBindingPath="Value"
                                GroupingLabel="GroupOne"/>

    <chart:StackingColumnSeries ItemsSource="{Binding Data2}"
                                XBindingPath="Name"
                                YBindingPath="Value"
                                GroupingLabel="GroupTwo"/>

    <chart:StackingColumnSeries ItemsSource="{Binding Data3}"
                                XBindingPath="Name"
                                YBindingPath="Value"
                                GroupingLabel="GroupOne"/>
</chart:SfCartesianChart>
SfCartesianChart chart = new SfCartesianChart();

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

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

StackingColumnSeries series1 = new StackingColumnSeries()
{
    ItemsSource = new ViewModel().Data1,
    XBindingPath = "Name",
    YBindingPath = "Value",
    GroupingLabel = "GroupOne"
};

StackingColumnSeries series2 = new StackingColumnSeries()
{
    ItemsSource = new ViewModel().Data2,
    XBindingPath = "Name",
    YBindingPath = "Value",
    GroupingLabel = "GroupTwo"
};

StackingColumnSeries series3 = new StackingColumnSeries()
{
    ItemsSource = new ViewModel().Data3,
    XBindingPath = "Name",
    YBindingPath = "Value",
    GroupingLabel = "GroupOne"
};

chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);
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.