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 ContentPage 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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinSample.Pies.OutLabels.View"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Xamarin.Forms;assembly=LiveChartsCore.SkiaSharpView.XamarinForms"
             xmlns:vms="clr-namespace:ViewModelsSamples.Pies.OutLabels;assembly=ViewModelsSamples">
    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>
    <lvc:PieChart
        Series="{Binding Series}"
        IsClockwise="False"
        InitialRotation="-90">
    </lvc:PieChart>
</ContentPage>

Articles you might also find useful: