Grouped And Stacked Bars
This sample uses C# 13 preview features such as partial properties, it also uses features from the CommunityToolkit.Mvvm package, you can learn more about it here.
This web site wraps every sample using a ContentPage instance, but LiveCharts controls can be used inside any container.
View model
namespace ViewModelsSamples.StackedBars.Groups;
public class ViewModel
{
public int[] Values1 { get; set; } = [3, 5, 3];
public int[] Values2 { get; set; } = [4, 2, 3];
public int[] Values3 { get; set; } = [4, 6, 6];
public int[] Values4 { get; set; } = [2, 5, 4];
public string[] Labels { get; set; } =
["Category 1", "Category 2", "Category 3"];
}
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MauiSample.StackedBars.Groups.View"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
xmlns:vms="clr-namespace:ViewModelsSamples.StackedBars.Groups;assembly=ViewModelsSamples"
x:DataType="vms:ViewModel">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlStackedColumnSeries Values="{Binding Values1}" StackGroup="0"/>
<lvc:XamlStackedColumnSeries Values="{Binding Values2}" StackGroup="0"/>
<lvc:XamlStackedColumnSeries Values="{Binding Values3}" StackGroup="1"/>
<lvc:XamlStackedColumnSeries Values="{Binding Values4}" StackGroup="1"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.XAxes>
<lvc:AxesCollection>
<lvc:XamlAxis
LabelsRotation="-15"
Labels="{Binding Labels}"
MinStep="1"
ForceStepToMin="True"/>
</lvc:AxesCollection>
</lvc:CartesianChart.XAxes>
</lvc:CartesianChart>
</ContentPage>
