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 UserControl instance, but LiveCharts controls can be used inside any container.

sample image

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

<UserControl
    x:Class="AvaloniaSample.StackedBars.Groups.View"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
    xmlns:vms="using:ViewModelsSamples.StackedBars.Groups"
    x:DataType="vms:ViewModel">

  <UserControl.DataContext>
    <vms:ViewModel/>
  </UserControl.DataContext>

  <lvc:CartesianChart>

    <lvc:CartesianChart.Series>
      <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:CartesianChart.Series>

    <lvc:CartesianChart.XAxes>
      <lvc:XamlAxis
          LabelsRotation="-15"
          Labels="{Binding Labels}"
          MinStep="1"
          ForceStepToMin="True"/>
    </lvc:CartesianChart.XAxes>

  </lvc:CartesianChart>

</UserControl>

Articles you might also find useful:

Cartesian chart control
Column series properties