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
{
}
Output:
