Basic Heat

sample image sample image

Razor

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

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

@code {
    private string[] xLabels = new[] { "Charles", "Richard", "Ana", "Mari" };
    private string[] yLabels = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" };
    private WeightedPoint[] values = new WeightedPoint[]
    {
        new(0, 0, 150), new(0, 1, 123), new(0, 2, 310), new(0, 3, 225), new(0, 4, 473), new(0, 5, 373),
        new(1, 0, 432), new(1, 1, 312), new(1, 2, 135), new(1, 3, 78), new(1, 4, 124), new(1, 5, 423),
        new(2, 0, 543), new(2, 1, 134), new(2, 2, 524), new(2, 3, 315), new(2, 4, 145), new(2, 5, 80),
        new(3, 0, 90), new(3, 1, 123), new(3, 2, 70), new(3, 3, 123), new(3, 4, 432), new(3, 5, 142)
    };

    private ISeries[] series = new ISeries[]
    {
        new HeatSeries<WeightedPoint>
        {
            Values = new WeightedPoint[]
            {
                new(0, 0, 150), new(0, 1, 123), new(0, 2, 310), new(0, 3, 225), new(0, 4, 473), new(0, 5, 373),
                new(1, 0, 432), new(1, 1, 312), new(1, 2, 135), new(1, 3, 78), new(1, 4, 124), new(1, 5, 423),
                new(2, 0, 543), new(2, 1, 134), new(2, 2, 524), new(2, 3, 315), new(2, 4, 145), new(2, 5, 80),
                new(3, 0, 90), new(3, 1, 123), new(3, 2, 70), new(3, 3, 123), new(3, 4, 432), new(3, 5, 142)
            },
            HeatMap = new[]
            {
                SKColor.Parse("#FFF176").AsLvcColor(),
                SKColor.Parse("#2F4F4F").AsLvcColor(),
                SKColor.Parse("#0000FF").AsLvcColor()
            }
        }
    };

    private Axis[] xAxes = new Axis[] { new Axis { Labels = new[] { "Charles", "Richard", "Ana", "Mari" } } };
    private Axis[] yAxes = new Axis[] { new Axis { Labels = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" } } };
    private SKHeatLegend legend = new SKHeatLegend { BadgePadding = new LiveChartsCore.Drawing.Padding(30, 20, 8, 20) };
}

Articles you might also find useful:

Cartesian chart control
Heat series properties