Box Series

sample image

Razor

@page "/Box/Basic"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.Defaults;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.SkiaSharpView.Painting;
@using SkiaSharp;

<CartesianChart
    Series="@series"
    XAxes="@xAxes"
    LegendPosition="LiveChartsCore.Measure.LegendPosition.Right">
</CartesianChart>

@code {
    private static BoxValue[] values1 = new BoxValue[]
    {
        new(100, 80, 60, 20, 70),
        new(90, 70, 50, 30, 60),
        new(80, 60, 40, 10, 50)
    };
    private static BoxValue[] values2 = new BoxValue[]
    {
        new(90, 70, 50, 30, 60),
        new(80, 60, 40, 10, 50),
        new(70, 50, 30, 20, 40)
    };
    private static BoxValue[] values3 = new BoxValue[]
    {
        new(80, 60, 40, 10, 50),
        new(70, 50, 30, 20, 40),
        new(60, 40, 20, 10, 30)
    };
    private static string[] labels = new string[] { "Apperitizers", "Mains", "Desserts" };

    private ISeries[] series = new ISeries[]
    {
        new BoxSeries<BoxValue> { Name = "Year 2023", Values = values1 },
        new BoxSeries<BoxValue> { Name = "Year 2024", Values = values2 },
        new BoxSeries<BoxValue> { Name = "Year 2025", Values = values3 }
    };

    private Axis[] xAxes = new Axis[]
    {
        new Axis
        {
            Labels = labels,
            LabelsRotation = 0,
            SeparatorsPaint = new SolidColorPaint(new SKColor(200, 200, 200)),
            SeparatorsAtCenter = false,
            TicksPaint = new SolidColorPaint(new SKColor(35, 35, 35)),
            TicksAtCenter = true
        }
    };
}

Articles you might also find useful:

Cartesian chart control
Column series properties
Line series properties