Grouped And Stacked Bars

sample image

Razor

@page "/StackedBars/Groups"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore.SkiaSharpView
@using LiveChartsCore

<CartesianChart
	Series="Series"
	XAxes="XAxes">
</CartesianChart>

@code {
    private ISeries[] Series { get; set; }
    private Axis[] XAxes { get; set; }

    protected override void OnInitialized()
    {
        var values1 = new int[] { 3, 5, 3 };
        var values2 = new int[] { 4, 2, 3 };
        var values3 = new int[] { 4, 6, 6 };
        var values4 = new int[] { 2, 5, 4 };
        var labels = new string[] { "Category 1", "Category 2", "Category 3" };

        Series = new ISeries[]
        {
            new StackedColumnSeries<int> { Values = values1, StackGroup = 0 },
            new StackedColumnSeries<int> { Values = values2, StackGroup = 0 },
            new StackedColumnSeries<int> { Values = values3, StackGroup = 1 },
            new StackedColumnSeries<int> { Values = values4, StackGroup = 1 }
        };

        XAxes = new Axis[]
        {
            new() {
                LabelsRotation = -15,
                Labels = labels,
                MinStep = 1,
                ForceStepToMin = true
            }
        };
    }
}

Articles you might also find useful:

Cartesian chart control
Column series properties