Category / Section
How to render the stacked step line series in WPF Chart?
1 min read
Follow the below steps to render stacked step line series:
Step 1:
Create a custom class StackedStepLineSeries by inheriting StepLineSeries.
C#:
public class StackedStepLineSeries : StepLineSeries { }
Step 2:
Override the OnDataSourceChanged method in the StackedStepLineSeries class to stack data from the provided ItemsSource as demonstrated in the following code snippet.
C#:
public class StackedStepLineSeries : StepLineSeries { public ObservableCollection<Model> Data { get; set; } public StackedStepLineSeries() { Data = new ObservableCollection<Model>(); } protected override void OnDataSourceChanged(IEnumerable oldValue, IEnumerable newValue) { int index = Area.Series.IndexOf(this); if (index > 0 && ItemsSource != Data) UpdateDataSource(index); else base.OnDataSourceChanged(oldValue, newValue); } private void UpdateDataSource(int seriesIndex) { Data.Clear(); var previousSeriesData = Area.Series[seriesIndex - 1].ItemsSource as ObservableCollection<Model>; var currentData = ItemsSource as ObservableCollection<Model>; for (int i = 0; i < previousSeriesData.Count; i++) { Data.Add(new Model() { XData = currentData[i].XData, YData = previousSeriesData[i].YData + currentData[i].YData }); } ItemsSource = Data; } }
Step 3:
Create an instance for custom StackedStepLineSeries class as demonstrated in the following code snippet.
XAML:
<local:StackedStepLineSeries XBindingPath="XData" YBindingPath="YData" ItemsSource="{Binding Data}"/> <local:StackedStepLineSeries XBindingPath="XData" YBindingPath="YData" ItemsSource="{Binding Data}"/> <local:StackedStepLineSeries XBindingPath="XData" YBindingPath="YData" ItemsSource="{Binding Data}"/>
Output:
Similarly, you can render StackedStepAreaSeries by inheriting StepAreaSeries by following Step 2 to stack the series. In addition, you have to set the Canvas.ZIndex and Interior properties to chart series as demonstrated in the following code snippet.
XAML:
<local:StackedStepAreaSeries Canvas.ZIndex="3" Interior="Red" XBindingPath="XData" YBindingPath="YData" ItemsSource="{Binding Data}"/> <local:StackedStepAreaSeries Canvas.ZIndex="2" Interior="Green" XBindingPath="XData" YBindingPath="YData" ItemsSource="{Binding Data}"/> <local:StackedStepAreaSeries Canvas.ZIndex="1" Interior="Blue" XBindingPath="XData" YBindingPath="YData" ItemsSource="{Binding Data}"/>
C#:
public class StackedStepAreaSeries : StepAreaSeries { }