Outside Labels

The [ObservableObject], [ObservableProperty] and [RelayCommand] attributes come from the CommunityToolkit.Mvvm package, you can read more about it here.

This web site wraps every sample using a UserControl instance, but LiveCharts controls can be used inside any container.

sample image

View model

using System.Collections.Generic;
using LiveChartsCore;
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;
using LiveChartsCore.SkiaSharpView.Extensions;

namespace ViewModelsSamples.Pies.OutLabels;

public partial class ViewModel : ObservableObject
{
    private static int _index = 0;
    private static string[] _names = new[] { "Maria", "Susan", "Charles", "Fiona", "George" };

    public IEnumerable<ISeries> Series { get; set; } =
         new[] { 8, 6, 5, 3, 3 }.AsPieSeries((value, series) =>
         {
             series.Name = _names[_index++ % _names.Length];
             series.DataLabelsPosition = LiveChartsCore.Measure.PolarLabelsPosition.Outer; // mark
             series.DataLabelsSize = 15;
             series.DataLabelsPaint = new SolidColorPaint(new SKColor(30, 30, 30));
             series.DataLabelsFormatter =
                point =>
                    $"This slide takes {point.Coordinate.PrimaryValue} " +
                    $"out of {point.StackedValue!.Total} parts";
             series.ToolTipLabelFormatter = point => $"{point.StackedValue!.Share:P2}";
         });
}

XAML



<UserControl x:Class="AvaloniaSample.Pies.OutLabels.View"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:lv="clr-namespace:LiveChartsCore;assembly=LiveChartsCore"
             xmlns:lvc="using:LiveChartsCore.SkiaSharpView.Avalonia"
             xmlns:vms="using:ViewModelsSamples.Pies.OutLabels">
  <UserControl.DataContext>
    <vms:ViewModel/>
  </UserControl.DataContext>
  <lvc:PieChart Series="{Binding Series}"
                IsClockwise="False"
                InitialRotation="-90">
  </lvc:PieChart>
</UserControl>

Articles you might also find useful: