WPF 100% Stacked Area Chart | Visualize Data Easily

Overview

The WPF 100% stacked area chart shows the relative percentage of multiple data series in stacked areas. The cumulative proportion of each stacked area always totals 100%. The y-axis will always be rendered with the range 0–100. The Chart supports zooming, scrolling, tooltip, trackball, and selection.

WPF 100 Percentage Stacked Area Chart documentation

WPF 100 Percentage Stacked Area Chart

Key features

WPF Grouped Stacked Area Chart

Grouped stacked chart

Group a series with another series using the group name in a chart. Group the series with different stacking names separately.

WPF Vertical Stacked Area Chart

Vertical chart

Rotate the chart to plot data vertically and view it from a different perspective.

WPF Stacked Area Chart showing Empty Point aka Null Point

Empty and null points

Empty or null data points are elegantly handled.

WPF Stacked Area Chart with Customized Border and Color

UI styling

Customize the color and border of the chart using the built-in APIs to make it visually unique.

Code example

Easily get started with the WPF 100% Stacked Area Chart using a few simple lines of C# code example as demonstrated below,

xaml
c#
<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 Area 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 Chart-->
            <chart:SfChart.PrimaryAxis>
                <chart:DateTimeAxis LabelFormat="ddd" />
            </chart:SfChart.PrimaryAxis>
          
            <!--Initialize the vertical axis for the Chart-->
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis />
            </chart:SfChart.SecondaryAxis>
 
            <!--Adding 100% Stacked Area Chart to the Chart-->
 
            <chart:StackingArea100Series 
                ItemsSource="{Binding Accidents}"
                XBindingPath="Month"
                YBindingPath="Bus">
            </chart:StackingArea100Series>
 
            <chart:StackingArea100Series 
                ItemsSource="{Binding Accidents}"
                XBindingPath="Month"
                YBindingPath="Car">
            </chart:StackingArea100Series>
 
            <chart:StackingArea100Series 
                ItemsSource="{Binding Accidents}"
                XBindingPath="Month"
                YBindingPath="Truck">
            </chart:StackingArea100Series>
        </chart:SfChart>
    </StackPanel>
</Window>
public class StackingAreaChartModel
    {
        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<StackingAreaChartModel> Accidents
        {
            get;
            set;
        }
       
 
    public ViewModel()
    {
          this.Accidents = new ObservableCollection<StackingAreaChartModel>();
            DateTime mth = new DateTime(2011, 1, 1);
 
            Accidents.Add(new StackingAreaChartModel() { Month = mth.AddMonths(6), Bus = 3, Car = 4, Truck = 5 });
            Accidents.Add(new StackingAreaChartModel() { Month = mth.AddMonths(7), Bus = 4, Car = 5, Truck = 6 });
            Accidents.Add(new StackingAreaChartModel() { Month = mth.AddMonths(8), Bus = 3, Car = 4, Truck = 5 });
            Accidents.Add(new StackingAreaChartModel() { Month = mth.AddMonths(9), Bus = 4, Car = 5, Truck = 6 });
            Accidents.Add(new StackingAreaChartModel() { Month = mth.AddMonths(10), Bus = 7, Car = 8, Truck = 7 });
            Accidents.Add(new StackingAreaChartModel() { Month = mth.AddMonths(11), Bus = 4, Car = 5, Truck = 6 });
            Accidents.Add(new StackingAreaChartModel() { Month = mth.AddMonths(12), Bus = 7, Car = 8, Truck = 7 });
            Accidents.Add(new StackingAreaChartModel() { Month = mth.AddMonths(13), Bus = 4, Car = 5, Truck = 6 });
    }
}