Stacked 100 Charts in WinUI Chart (SfCartesianChart)

14 Jun 20249 minutes to read

Stacked Column 100 Chart

The StackedColumn100Series resembles StackedColumnSeries but the cumulative portion of each stacked element always comes to a total of 100%.

XAML

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelPlacement="BetweenTicks"/>
    </chart:SfCartesianChart.XAxes>

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

    <chart:StackedColumn100Series XBindingPath="CountryName" 
                                  YBindingPath="GoldMedals" 
                                  ItemsSource="{Binding MedalDetails}"/>

    <chart:StackedColumn100Series XBindingPath="CountryName"
                                  YBindingPath="SilverMedals" 
                                  ItemsSource="{Binding MedalDetails}"/>

    <chart:StackedColumn100Series XBindingPath="CountryName" 
                                  YBindingPath="BronzeMedals" 
                                  ItemsSource="{Binding MedalDetails}"/>
    ...
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();
CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.LabelPlacement = LabelPlacement.BetweenTicks;
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

StackedColumn100Series series1 = new StackedColumn100Series()
{
    ItemsSource = viewModel.MedalDetails,
    XBindingPath = "CountryName",
    YBindingPath = "GoldMedals",
};

StackedColumn100Series series2 = new StackedColumn100Series()
{
    ItemsSource = viewModel.MedalDetails,
    XBindingPath = "CountryName",
    YBindingPath = "SilverMedals",
};

StackedColumn100Series series3 = new StackedColumn100Series()
{
    ItemsSource = viewModel.MedalDetails,
    XBindingPath = "CountryName",
    YBindingPath = "BronzeMedals",
};

chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);
...

NOTE

You can refer to our WinUI 100% Stacked Column Chart feature tour page for its groundbreaking feature representations. You can also explore our WinUI 100% Stacked Column Chart example that shows how to easily configure with built-in support for creating stunning visual effects.

Stacked Line 100 Chart

The StackedLine100Series resembles StackedLineSeries but the cumulative portion of each stacked element always comes to a total of 100%.

XAML

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelPlacement="BetweenTicks"/>
    </chart:SfCartesianChart.XAxes>

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

    <chart:StackedLine100Series ItemsSource="{Binding Data}" 
                                XBindingPath="MonthlyExpenses" 
                                YBindingPath="Father" />

    <chart:StackedLine100Series ItemsSource="{Binding Data}"
                                XBindingPath="MonthlyExpenses"  
                                YBindingPath="Mother" />

    <chart:StackedLine100Series ItemsSource="{Binding Data}"
                                XBindingPath="MonthlyExpenses" 
                                YBindingPath="Son"/>
    ...
<chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();
CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.LabelPlacement = LabelPlacement.BetweenTicks;
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

StackedLine100Series series1 = new StackedLine100Series()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "MonthlyExpenses",
    YBindingPath = "Father",
};

StackedLine100Series series2 = new StackedLine100Series()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "MonthlyExpenses",
    YBindingPath = "Mother",
};

StackedLine100Series series3 = new StackedLine100Series()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "MonthlyExpenses",
    YBindingPath = "Son",
};

chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);
...

NOTE

You can refer to our WinUI 100% Stacked Line Chart feature tour page for its groundbreaking feature representations. You can also explore our WinUI 100% Stacked Line Chart example that shows how to easily configure with built-in support for creating stunning visual effects.

Stacked Area 100 Chart

The StackedArea100Series is similar to StackedAreaSeries, but the cumulative portion of each stacked element always comes to a total of 100%.

XAML

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis LabelPlacement="BetweenTicks"/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis />
    </chart:SfCartesianChart.YAxes>  
    
    <chart:StackedArea100Series XBindingPath="Month"         
                                YBindingPath="Bus" 
                                ItemsSource="{Binding Accidents}" />

    <chart:StackedArea100Series XBindingPath="Month" 
                                YBindingPath="Car" 
                                ItemsSource="{Binding Accidents}" />

    <chart:StackedArea100Series XBindingPath="Month" 
                                YBindingPath="Truck" 
                                ItemsSource="{Binding Accidents}" />
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();
CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.LabelPlacement = LabelPlacement.BetweenTicks;
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

StackedArea100Series series1 = new StackedArea100Series()
{
    ItemsSource = viewModel.Accidents,
    XBindingPath = "Month",
    YBindingPath = "Bus",
};

StackedArea100Series series2 = new StackedArea100Series()
{
    ItemsSource = viewModel.Accidents,
    XBindingPath = "Month",
    YBindingPath = "Car",
};

StackedArea100Series series3 = new StackedArea100Series()
{
    ItemsSource = viewModel.Accidents,
    XBindingPath = "Month",
    YBindingPath = "Truck",
};

chart.Series.Add(series1);
chart.Series.Add(series2);
chart.Series.Add(series3);
...

NOTE

You can refer to our WinUI 100% Stacked Area Chart feature tour page for its groundbreaking feature representations. You can also explore our WinUI 100% Stacked Area Chart example that shows how to easily configure with built-in support for creating stunning visual effects.