Angular Gauge

Code behind

using System;
using System.Windows.Forms;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Extensions;
using LiveChartsCore.SkiaSharpView.VisualElements;
using LiveChartsCore.SkiaSharpView.WinForms;

namespace WinFormsSample.Pies.AngularGauge;

public partial class View : UserControl
{
    private readonly PieChart pieChart;
    private readonly Random _random = new();

    public View()
    {
        InitializeComponent();
        Size = new System.Drawing.Size(50, 50);

        var sectionsOuter = 130;
        var sectionsWidth = 20;

        var needle = new NeedleVisual
        {
            Value = 45
        };

        pieChart = new PieChart
        {
            Series = GaugeGenerator.BuildAngularGaugeSections(
                new GaugeItem(60, s => SetStyle(sectionsOuter, sectionsWidth, s)),
                new GaugeItem(30, s => SetStyle(sectionsOuter, sectionsWidth, s)),
                new GaugeItem(10, s => SetStyle(sectionsOuter, sectionsWidth, s))),
            VisualElements = [
                new AngularTicksVisual
                {
                    Labeler = value => value.ToString("N1"),
                    LabelsSize = 16,
                    LabelsOuterOffset = 15,
                    OuterOffset = 65,
                    TicksLength = 20
                },
                needle
            ],
            InitialRotation = -225,
            MaxAngle = 270,
            MinValue = 0,
            MaxValue = 100,
            Location = new System.Drawing.Point(0, 0),
            Size = new System.Drawing.Size(50, 50),
            Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top | AnchorStyles.Bottom
        };

        Controls.Add(pieChart);

        var b1 = new Button { Text = "Update", Location = new System.Drawing.Point(0, 0) };
        b1.Click += (sender, e) => needle.Value = _random.Next(0, 100);
        Controls.Add(b1);
        b1.BringToFront();
    }

    private static void SetStyle(
        double sectionsOuter, double sectionsWidth, PieSeries<ObservableValue> series)
    {
        series.OuterRadiusOffset = sectionsOuter;
        series.MaxRadialColumnWidth = sectionsWidth;
        series.CornerRadius = 0;
    }
}

Custom needle

You can inherit from NeedleGeometry to change the aspect of the needle, for example in the next code snippet, the SmallNeedle class inherits from NeedleGeometry, then in the constructor it sets the ScaleTransform property to 0.6 in the X and Y axis, this will make the needle 40% smaller.

using LiveChartsCore.SkiaSharpView.Drawing.Geometries;

namespace ViewModelsSamples.Pies.AngularGauge;

public class SmallNeedle : NeedleGeometry
{
    public SmallNeedle()
    {
        ScaleTransform = new(0.6f, 0.6f);
    }
}

Finally we need to use this new needle in our gauge, in the example above change the type NeedleVisual to NeedleVisual<SmallNeedle>.

public partial class ViewModel
{
    // ...

    public NeedleVisual<SmallNeedle> Needle { get; set; }

    public ViewModel()
    {
        Needle = new NeedleVisual<SmallNeedle>
        {
            Value = 45
        };
        
        // ...
    }
    
    // ...
}

Run the app again, now the needle is 40% smaller.

You can also override the Draw() method and use SkiaSharp to create your own needle, in the next snippet, we are drawing a rectangle using SkiaSharp to represent the needle:

using LiveChartsCore.SkiaSharpView.Drawing;
using LiveChartsCore.SkiaSharpView.Drawing.Geometries;

namespace ViewModelsSamples.Pies.AngularGauge;

public class CustomNeedle : NeedleGeometry
{
    public override void Draw(SkiaSharpDrawingContext context)
    {
        var paint = context.ActiveSkiaPaint;

        context.Canvas.DrawRect(X - Width * 0.5f, Y, Width, Radius, paint);
    }
}

Finally we need to use this new needle in our gauge:"

public partial class ViewModel
{
    // ...

    public NeedleVisual<CustomNeedle> Needle { get; set; }

    public ViewModel()
    {
        Needle = new NeedleVisual<CustomNeedle>
        {
            Value = 45
        };
        
        // ...
    }
    
    // ...
}

Run the app again, now there is a rectangle as our needle:

Articles you might also find useful: