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.
View Model
using System;
using LiveChartsCore.Kernel;
namespace ViewModelsSamples.StackedBars.Basic;
public class ViewModel
{
public int[] Values1 { get; set; } =
[3, 5, -3, 2, 5, -4, -2];
public int[] Values2 { get; set; } =
[4, 2, -3, 2, 3, 4, -2];
public int[] Values3 { get; set; } =
[-2, 6, 6, 5, 4, 3, -2];
public Func<ChartPoint, string> Formatter { get; set; } =
p => $"{p.Coordinate.PrimaryValue:N} ({p.StackedValue!.Share:P})";
}
XAML
<UserControl
x:Class="WinUISample.StackedBars.Basic.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:lvc="using:LiveChartsCore.SkiaSharpView.WinUI"
xmlns:vms="using:ViewModelsSamples.StackedBars.Basic"
mc:Ignorable="d">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<lvc:CartesianChart>
<lvc:CartesianChart.Series>
<lvc:SeriesCollection>
<lvc:XamlStackedColumnSeries
Values="{Binding Values1}"
ShowDataLabels="True"
YToolTipLabelFormatter="{Binding Formatter}"/>
<lvc:XamlStackedColumnSeries
Values="{Binding Values2}"
ShowDataLabels="True"
YToolTipLabelFormatter="{Binding Formatter}"/>
<lvc:XamlStackedColumnSeries
Values="{Binding Values3}"
ShowDataLabels="True"
YToolTipLabelFormatter="{Binding Formatter}"/>
</lvc:SeriesCollection>
</lvc:CartesianChart.Series>
</lvc:CartesianChart>
</UserControl>