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 ContentPage 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
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="MauiSample.Pies.Gauge4.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.Pies.Gauge4;assembly=ViewModelsSamples"
x:DataType="vms:ViewModel">
<ContentPage.BindingContext>
<vms:ViewModel/>
</ContentPage.BindingContext>
<lvc:PieChart
InitialRotation="-90"
MaxAngle="350"
MinValue="0"
MaxValue="100">
<lvc:PieChart.Series>
<lvc:SeriesCollection>
<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:SeriesCollection>
</lvc:PieChart.Series>
</lvc:PieChart>
</ContentPage>