Multiple Values Gauge
View model
using System.Collections.Generic;
using LiveChartsCore;
using LiveChartsCore.Measure;
using LiveChartsCore.SkiaSharpView;
using CommunityToolkit.Mvvm.ComponentModel;
namespace ViewModelsSamples.Pies.Gauge3;
public partial class ViewModel : ObservableObject
{
public IEnumerable<ISeries> Series { get; set; }
= new GaugeBuilder()
.WithLabelsSize(20)
.WithLabelsPosition(PolarLabelsPosition.Start)
.WithLabelFormatter(point => $"{point.PrimaryValue} {point.Context.Series.Name}")
.WithInnerRadius(20)
.WithOffsetRadius(8)
.WithBackgroundInnerRadius(20)
.AddValue(30, "Vanessa")
.AddValue(50, "Charles")
.AddValue(70, "Ana")
.BuildSeries();
}
HTML
@page "/Pies/Gauge3"
@using LiveChartsCore.SkiaSharpView.Blazor
@using ViewModelsSamples.Pies.Gauge3
<style>
.sample-wrap {
display: inline-block;
width: 600px;
height: 600px;
}
</style>
<div class="sample-wrap">
<PieChart
Series="ViewModel.Series"
InitialRotation="45"
MaxAngle="270"
Total="100">
</PieChart>
</div>
@code {
public ViewModel ViewModel { get; set; } = new();
}
Articles you might also find useful: