The WPF 100% stacked bar chart displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. Thus, the y-axis will always render within the range 0–100. This chart type is best suited for depicting the relative contribution of data points.
Rotate the WPF 100% stacked bar chart to plot data vertically and view it from a different perspective.
Customize the spacing between two bars and the width of the bar.
Group a series with another series separately using a different group name.
Customize the color and border of the chart using built-in APIs to make it visually unique.
Easily get started with the WPF 100% Stacked Bar Chart using a few simple lines of C# code example as demonstrated below,
<Window x:Class="ChartExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:ChartExample"
xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
mc:Ignorable="d"
Title="WPF 100% Stacked Bar Chart" Height="450" Width="700">
<!--Setting DataContext-->
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<StackPanel>
<chart:SfChart Height="300" Width="500">
<!--Initialize the horizontal axis for the WPF Chart-->
<chart:SfChart.PrimaryAxis>
<chart:DateTimeAxis LabelFormat="ddd" />
</chart:SfChart.PrimaryAxis>
<!--Initialize the vertical axis for the WPF Chart-->
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis />
</chart:SfChart.SecondaryAxis>
<!--Adding 100% Stacked Bar Series to the SfChart-->
<chart:StackingBar100Series
ItemsSource="{Binding Accidents}"
StrokeThickness="3"
XBindingPath="Month"
YBindingPath="Bus">
</chart:StackingBar100Series>
<chart:StackingBar100Series
ItemsSource="{Binding Accidents}"
StrokeThickness="3"
XBindingPath="Month"
YBindingPath="Car">
</chart:StackingBar100Series>
<chart:StackingBar100Series
ItemsSource="{Binding Accidents}"
StrokeThickness="3"
XBindingPath="Month"
YBindingPath="Truck">
</chart:StackingBar100Series>
</chart:SfChart>
</StackPanel>
</Window>
public class StackingBarChartModel
{
public DateTime Month { get; set; }
public double Bus { get; set; }
public double Car { get; set; }
public double Truck { get; set; }
}
public class ViewModel
{
public ObservableCollection<StackingBarChartModel> Accidents
{
get;
set;
}
public ViewModel()
{
this.Accidents = new ObservableCollection<StackingBarChartModel>();
DateTime mth = new DateTime(2011, 1, 1);
Accidents.Add(new StackingBarChartModel() { Month = mth.AddMonths(6), Bus = 3, Car = 4, Truck = 5 });
Accidents.Add(new StackingBarChartModel() { Month = mth.AddMonths(7), Bus = 4, Car = 5, Truck = 6 });
Accidents.Add(new StackingBarChartModel() { Month = mth.AddMonths(8), Bus = 3, Car = 4, Truck = 5 });
Accidents.Add(new StackingBarChartModel() { Month = mth.AddMonths(9), Bus = 4, Car = 5, Truck = 6 });
Accidents.Add(new StackingBarChartModel() { Month = mth.AddMonths(10), Bus = 7, Car = 8, Truck = 7 });
Accidents.Add(new StackingBarChartModel() { Month = mth.AddMonths(11), Bus = 4, Car = 5, Truck = 6 });
Accidents.Add(new StackingBarChartModel() { Month = mth.AddMonths(12), Bus = 7, Car = 8, Truck = 7 });
Accidents.Add(new StackingBarChartModel() { Month = mth.AddMonths(13), Bus = 4, Car = 5, Truck = 6 });
}
}
The WPF 100% Stacked Bar Chart configuration code is available in GitHub.
WPF 100% Stacked Bar Chart User Guide
Learn more about the available options to customize WPF 100% Stacked Bar Charts.
WPF 100% Stacked Bar Chart API reference
Explore the WPF 100% Stacked Bar Chart APIs.