Slim Gauge
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.
View model
using System;
using LiveChartsCore.Kernel;
namespace ViewModelsSamples.Pies.Gauge4;
public class ViewModel
{
public double Vanesa { get; set; } = 50;
public double Charles { get; set; } = 80;
public double Ana { get; set; } = 95;
public Func<ChartPoint, string> Formatter { get; set; } =
point => point.Coordinate.PrimaryValue.ToString();
}
XAML
<UserControl
x:Class="AvaloniaSample.Pies.Gauge4.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.Pies.Gauge4"
x:DataType="vms:ViewModel">
<UserControl.DataContext>
<vms:ViewModel/>
</UserControl.DataContext>
<lvc:PieChart
InitialRotation="-90"
MaxAngle="350"
MinValue="0"
MaxValue="100">
<lvc:PieChart.Series>
<lvc:XamlGaugeSeries
GaugeValue="{Binding Vanesa}"
SeriesName="Vanessa"
DataLabelsSize="20"
DataLabelsPosition="End"
DataLabelsFormatter="{Binding Formatter}"
InnerRadius="20"
MaxRadialColumnWidth="5"/>
<lvc:XamlGaugeSeries
GaugeValue="{Binding Charles}"
SeriesName="Charles"
DataLabelsSize="20"
DataLabelsPosition="End"
DataLabelsFormatter="{Binding Formatter}"
InnerRadius="20"
MaxRadialColumnWidth="5"/>
<lvc:XamlGaugeSeries
GaugeValue="{Binding Ana}"
SeriesName="Ana"
DataLabelsSize="20"
DataLabelsPosition="End"
DataLabelsFormatter="{Binding Formatter}"
InnerRadius="20"
MaxRadialColumnWidth="5"/>
<lvc:XamlGaugeBackgroundSeries Fill="{x:Null}"/>
</lvc:PieChart.Series>
</lvc:PieChart>
</UserControl>