Category / Section
How to group stacking series in the Xamarin.Forms Chart?
1 min read
This article explains how to group the stacking series in Xamarin.Forms Chart (SfChart).
Stacking series are rendered in such a way that all the series are stacked. This is not desired when there are many stacking series in the chart. In such cases, the Xamarin.Forms chart provides options to group the stacking series by using the GroupingLabel property.
For example, consider four stacking column series grouped into two; GroupOne and GroupTwo by using the GroupingLabel property. Then, chart is rendered in two stacking columns at a point; one for GroupOne and the other for GroupTwo.
[XAML]
<chart:SfChart>
...
<chart:StackingColumnSeries ItemsSource ="{Binding Data1}"
GroupingLabel="GroupOne"
Label="Google"
XBindingPath="Month"
YBindingPath="Value"/>
<chart:StackingColumnSeries ItemsSource ="{Binding Data2}"
GroupingLabel="GroupTwo"
Label="Bing"
XBindingPath="Month"
YBindingPath="Value"/>
<chart:StackingColumnSeries ItemsSource ="{Binding Data3}"
GroupingLabel="GroupOne"
Label="Yahoo"
XBindingPath="Month"
YBindingPath="Value"/>
<chart:StackingColumnSeries ItemsSource ="{Binding Data4}"
GroupingLabel="GroupTwo"
Label="Ask"
XBindingPath="Month"
YBindingPath="Value"/>
</chart:SfChart>
[C#]
SfChart chart = new SfChart();
...
StackingColumnSeries stackingColumnSeries1 = new StackingColumnSeries()
{
ItemsSource = Data1,
GroupingLabel = "GroupOne",
Label = "Google",
XBindingPath = "Month",
YBindingPath = "Value"
};
StackingColumnSeries stackingColumnSeries2 = new StackingColumnSeries()
{
ItemsSource = Data2,
GroupingLabel = "GroupTwo",
Label = "Bing",
XBindingPath = "Month",
YBindingPath = "Value"
};
StackingColumnSeries stackingColumnSeries3 = new StackingColumnSeries()
{
ItemsSource = Data3,
GroupingLabel = "GroupOne",
Label = "Yahoo",
XBindingPath = "Month",
YBindingPath = "Value"
};
StackingColumnSeries stackingColumnSeries4 = new StackingColumnSeries()
{
ItemsSource = Data4,
GroupingLabel = "GroupTwo",
Label = "Ask",
XBindingPath = "Month",
YBindingPath = "Value"
};
chart.Series.Add(stackingColumnSeries1);
chart.Series.Add(stackingColumnSeries2);
chart.Series.Add(stackingColumnSeries3);
chart.Series.Add(stackingColumnSeries4);
Output
Fig 1: The StackingColumnSeries before grouping.
Fig 2: The StackingColumnSeries after grouping.
