HeatMap Chart

A chart that displays a HeatMap.

Warning: This component is currently under development.

Breaking changes such as updates to the API, look and feel, or CSS classes, may occur even in minor patch releases. Please use it only if you are prepared to adapt your code accordingly and provide feedback or contribute code.

Rendered in 0 ms
API
Basic HeatMap

The basic HeatMap Chart will take from 1 to 5 colors and create a heat map based on the ChartSeries data you provide. Colors will be interpolated if more than 1. Colors can be provided via ChartOptions and XAxisLabels are provided via the XAxisLabel Option. These values will be used in order and if you wanted to skip a column just adding string.Empty would work.

23.9323.9351.8851.887.697.69A29.4829.4835.9035.94.344.345.985.98A93.2893.289.569.56CCLess4.3426.57548.8171.04593.28More
Number of Colors Selected: 1
<MudPaper Class="pa-4">
    <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" ChartOptions="@_options"
              XAxisLabels="@_xLabels" Width="100%" Height="350px"></MudChart>
</MudPaper>
<MudPaper Class="pa-4 mt-2 d-flex justify-center">
    <MudButton OnClick="AddColor" Disabled="@(_colorCount >= 5)" Variant="Variant.Filled" Color="Color.Primary">Add Color</MudButton>
    <MudButton @onclick="RandomizeData" Variant="Variant.Filled" Class="mx-4">Randomize</MudButton>
    <MudButton OnClick="RemoveColor" Disabled="@(_colorCount <= 1)" Variant="Variant.Filled" Color="Color.Secondary">Remove Color</MudButton>
</MudPaper>

<MudStack Row Justify="Justify.Center">
    @for (var i = 0; i < _colors.Length; i++)
    {
        <MudPaper Class="pa-2 mx-1"
                  Style="@($"background-color: {_colors[i]}; width: 50px; height: 50px;{(i > _colorCount -1 ? string.Empty : "border: 2px solid black;" )}")">
        </MudPaper>
    }
</MudStack>

<MudText Align="Align.Center" Typo="Typo.h6">Number of Colors Selected: @_colorCount</MudText>

@code {
    private int _colorCount = 1;
    private readonly string[] _colors = ["#5AC8FA", "#34C759", "#007AFF", "#FFCC00", "#e03131"];
    private List<ChartSeries> _series = [];
    private ChartOptions _options = new();
    private string[] _xLabels = [];

    protected override void OnInitialized()
    {
        base.OnInitialized();
        BuildOptions();
        RandomizeData();
    }

    private void AddColor()
    {
        _colorCount++;
        BuildOptions();
    }

    private void RemoveColor()
    {
        _colorCount--;
        BuildOptions();
    }

    private void BuildOptions()
    {
        var options = new ChartOptions
        {
            ChartPalette = _colors.Take(_colorCount).ToArray()
        };
        _options = options;
    }

    private void RandomizeData()
    {
        string[] xaxis = ["A", string.Empty, "C",];
        var heatMapSeries = new List<ChartSeries>();
        var dataPoints = xaxis.Length;
        foreach (var x in xaxis)
        {
            var data = new double[dataPoints];
            for (int i = 0; i < dataPoints; i++)
            {
                data[i] = Math.Round(Random.Shared.NextDouble() * 100, 2);
            }
            heatMapSeries.Add(new ChartSeries { Name = x, Data = data });
        }
        _xLabels = xaxis;
        _series = heatMapSeries;
        BuildOptions();
    }
}
X and Y Axis Label Positioning

Both the X and Y Axis allow deep customization for positioning. In ChartOptions you can select if the YAxis Labels show on the Left, Right, or None. The XAxis Label options are Top, Bottom, or none. X Axis Labels are generated from the XAxisLabel field and will generate in order. If you want one skipped just supply a string.Empty to that field. The Y Axis Labels are generated from the ChartSeries.Name tag, and would also be skipped if supplied as string.Empty.

79.3979.39A12.8912.89B0.770.77CA13.8713.8763.6063.674.1374.13B82.9582.9581.9781.975.655.65CLess0.7721.31541.8600000000000162.4050000000000182.95More

YAxis Labels

XAxis Labels

<MudPaper Class="pa-4">
    <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" ChartOptions="@_options"
              XAxisLabels="@_xLabels" Width="100%" Height="350px"></MudChart>
</MudPaper>
<MudPaper Class="pa-4 mt-2 d-flex justify-center">
    <MudGrid Spacing="2" Class="d-flex">
        <MudItem xs="4">
            <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center">
                <MudText Class="pr-1">YAxis Labels</MudText>
                <MudSelect T="YAxisLabelPosition" @bind-Value="@_yAxisLabelPosition" @bind-Value:after="BuildOptions" FullWidth="true">
                    <MudSelectItem Value="YAxisLabelPosition.Left">Left</MudSelectItem>
                    <MudSelectItem Value="YAxisLabelPosition.Right">Right</MudSelectItem>
                    <MudSelectItem Value="YAxisLabelPosition.None">None</MudSelectItem>
                </MudSelect>
            </MudStack>
        </MudItem>
        <MudItem xs="4" Class="d-flex align-center justify-center">
            <MudButton @onclick="RandomizeData" Variant="Variant.Filled" Class="mx-4">Randomize</MudButton>
        </MudItem>
        <MudItem xs="4">
            <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center">
                <MudText Class="pr-1">XAxis Labels</MudText>
                <MudSelect T="XAxisLabelPosition" @bind-Value="@_xAxisLabelPosition" @bind-Value:after="BuildOptions" FullWidth="true">
                    <MudSelectItem Value="XAxisLabelPosition.Top">Top</MudSelectItem>
                    <MudSelectItem Value="XAxisLabelPosition.Bottom">Bottom</MudSelectItem>
                    <MudSelectItem Value="XAxisLabelPosition.None">None</MudSelectItem>
                </MudSelect>
            </MudStack>
        </MudItem>
    </MudGrid>
</MudPaper>

@code {
    private readonly string[] _colors = ["#5AC8FA", "#34C759", "#007AFF"];
    private List<ChartSeries> _series = [];
    private ChartOptions _options = new();
    private XAxisLabelPosition _xAxisLabelPosition = XAxisLabelPosition.Top;
    private YAxisLabelPosition _yAxisLabelPosition = YAxisLabelPosition.Left;
    private string[] _xLabels = [];

    protected override void OnInitialized()
    {
        base.OnInitialized();
        BuildOptions();
        RandomizeData();
    }

    private void BuildOptions()
    {
        var options = new ChartOptions
        {
            ChartPalette = _colors,
            XAxisLabelPosition = _xAxisLabelPosition,
            YAxisLabelPosition = _yAxisLabelPosition
        };
        _options = options;
    }

    private void RandomizeData()
    {
        string[] xaxis = ["A", "B", "C",];
        var heatMapSeries = new List<ChartSeries>();
        var dataPoints = xaxis.Length;
        foreach (var x in xaxis)
        {
            var data = new double[dataPoints];
            for (int i = 0; i < dataPoints; i++)
            {
                data[i] = Math.Round(Random.Shared.NextDouble() * 100, 2);
            }
            heatMapSeries.Add(new ChartSeries { Name = x, Data = data });
        }
        _xLabels = xaxis;
        _series = heatMapSeries;
        BuildOptions();
    }
}
Enable Smooth Gradient

By default the heatmap is rendered with 5px of padding between cells that are created and sized dynamically to be a solid color. If you set EnableSmoothGradient to true the padding is removed and all cells are blended top/bottom/left/right to ensure a smooth transition.

48.7248.72 82.7082.7 62.0162.01A 42.3542.35 55.9055.9 13.3113.31 36.4336.43A 19.1319.13 18.9818.98CCLess13.3130.657548.00565.352582.7More
<MudPaper Class="pa-4">
    <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" ChartOptions="@_options"
              XAxisLabels="@_xLabels" Width="100%" Height="350px"></MudChart>
</MudPaper>
<MudPaper Class="pa-4 mt-2 d-flex justify-center">
    <MudItem xs="4" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="_enableSmoothGradient" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Smooth Gradient
        </MudCheckBox>
    </MudItem>
    <MudButton @onclick="RandomizeData" Variant="Variant.Filled" Class="mx-4">Randomize</MudButton>
</MudPaper>

@code {
    private bool _enableSmoothGradient = true;
    private readonly string[] _colors = ["#5AC8FA", "#34C759", "#007AFF"];
    private List<ChartSeries> _series = [];
    private ChartOptions _options = new();
    private string[] _xLabels = [];

    protected override void OnInitialized()
    {
        base.OnInitialized();
        BuildOptions();
        RandomizeData();
    }

    private void BuildOptions()
    {
        var options = new ChartOptions
        {
            ChartPalette = _colors,
            EnableSmoothGradient = _enableSmoothGradient
        };
        _options = options;
    }

    private void RandomizeData()
    {
        string[] xaxis = ["A", string.Empty, "C",];
        var heatMapSeries = new List<ChartSeries>();
        var dataPoints = xaxis.Length;
        foreach (var x in xaxis)
        {
            var data = new double[dataPoints];
            for (int i = 0; i < dataPoints; i++)
            {
                data[i] = Math.Round(Random.Shared.NextDouble() * 100, 2);
            }
            heatMapSeries.Add(new ChartSeries { Name = x, Data = data });
        }
        _xLabels = xaxis;
        _series = heatMapSeries;
        BuildOptions();
    }
}
Display Values

By default values are shown both on the cell and as a tooltip to the cell based on the ChartSeries data you supplied. The font size is dynamically generated to be 2 smaller than the largest that would fit or 8 whichever is greater. Both Value Display and Tooltip are valid options. Values may be formatted using the ChartOptions.ValueFormatString which defaults to F2. Tooltips are always shown in full value.

11.3611.3668.6968.6911.5411.54A60.1760.1769.8769.8763.3663.36B10.2310.23A66.4866.48B30.4530.45CCLess10.2325.1440.0554.9600000000000169.87More
<MudPaper Class="pa-4">
    <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" ChartOptions="@_options"
              XAxisLabels="@_xLabels" Width="100%" Height="350px"></MudChart>
</MudPaper>
<MudPaper Class="pa-4 mt-2 d-flex justify-center">
    <MudGrid Spacing="2" Class="d-flex">
        <MudItem xs="4" Class="d-flex align-center">
            <MudCheckBox T="bool" @bind-Value="@_showValueLabels" @bind-Value:after="BuildOptions" Color="Color.Primary">
                Show Values
            </MudCheckBox>
        </MudItem>
        <MudItem xs="4" Class="d-flex align-center justify-center">
            <MudButton @onclick="RandomizeData" Variant="Variant.Filled" Class="mx-4">Randomize</MudButton>
        </MudItem>
        <MudItem xs="4" Class="d-flex align-center">
            <MudCheckBox T="bool" @bind-Value="@_showValueToolTips" @bind-Value:after="BuildOptions" Color="Color.Primary">
                Show Value Tooltips
            </MudCheckBox>
        </MudItem>
    </MudGrid>
</MudPaper>

@code {
    private readonly string[] _colors = ["#5AC8FA", "#34C759", "#007AFF"];
    private List<ChartSeries> _series = [];
    private ChartOptions _options = new();
    private bool _showValueLabels = true;
    private bool _showValueToolTips = true;
    private string[] _xLabels = [];

    protected override void OnInitialized()
    {
        base.OnInitialized();
        BuildOptions();
        RandomizeData();
    }

    private void BuildOptions()
    {
        var options = new ChartOptions
        {
            ChartPalette = _colors,
            ShowLabels = _showValueLabels,
            ShowToolTips = _showValueToolTips
        };
        _options = options;
    }

    private void RandomizeData()
    {
        string[] xaxis = ["A", "B", "C",];
        var heatMapSeries = new List<ChartSeries>();
        var dataPoints = xaxis.Length;
        foreach (var x in xaxis)
        {
            var data = new double[dataPoints];
            for (int i = 0; i < dataPoints; i++)
            {
                data[i] = Math.Round(Random.Shared.NextDouble() * 100, 2);
            }
            heatMapSeries.Add(new ChartSeries { Name = x, Data = data });
        }
        _xLabels = xaxis;
        _series = heatMapSeries;
        BuildOptions();
    }
}
MudHeatMapCell

MudHeatMapCell allows you to customize many aspects of each individual heat map. MudHeatMapCell can be used to display beautiful and comprehensive Heat Map charts. You must set the Row and Column and all other values are optional. Any child content you add should either be sized appropriately by html or you should specify the Width and Height of MudHeatMapCell. You can also override the Value and/or Color of the cell. Child Content can contain almost any type of html element but if it's any type of image ensure to provide the Width and Height so it can be resized dynamically. The Value can still be retrieved from the series.

Sun
Mon
TueWed
Thu
Fri
Sat
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<MudPaper Class="pa-4">
    <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" ChartOptions="@_options"
    XAxisLabels="@_xLabels" Width="100%" Height="300px">
    <!-- Setting Value for weekend to 0 and weekday to 1 to let Color Palette do the magic -->
        <MudHeatMapCell Row="0" Column="0" Value="0">
            <MudIcon Icon="material-symbols-outlined/rainy" Color="Color.Secondary" />
        </MudHeatMapCell>
        <MudHeatMapCell Row="0" Column="1" Value="1">
            <MudIcon Icon="material-symbols-outlined/sunny" Color="Color.Secondary" />
        </MudHeatMapCell>
        <MudHeatMapCell Row="0" Column="2" Value="1">
            <MudIcon Icon="material-symbols-outlined/foggy" Color="Color.Secondary" />
        </MudHeatMapCell>
        <MudHeatMapCell Row="0" Column="3" Value="1" Width="24" MudColor="@(new Utilities.MudColor("#FF5733"))">
            <MudIcon Icon="@Icons.Material.Outlined.Thunderstorm" Color="Color.Dark" />
        </MudHeatMapCell>
        <MudHeatMapCell Row="0" Column="4" Value="1" >
            <MudIcon Icon="material-symbols-outlined/rainy" Color="Color.Secondary" />
        </MudHeatMapCell>
        <MudHeatMapCell Row="0" Column="5" Value="1">
            <MudIcon Icon="material-symbols-outlined/sunny" Color="Color.Secondary" />
        </MudHeatMapCell>
        <MudHeatMapCell Row="0" Column="6" Value="0">
            <MudIcon Icon="material-symbols-outlined/sunny" Color="Color.Secondary" />
        </MudHeatMapCell>
    </MudChart>
</MudPaper>

@code {
    private readonly string[] _colors = ["#5AC8FA", "#34C759", "#007AFF"];
    private List<ChartSeries> _series = [];
    private ChartOptions _options = new();
    private string[] _xLabels = [];

    protected override void OnInitialized()
    {
        base.OnInitialized();
        WeeklyData();
        BuildOptions();
    }

    private void BuildOptions()
    {
        var options = new ChartOptions
        {
            ChartPalette = _colors,
            YAxisLabelPosition = YAxisLabelPosition.None,
            ShowLegend = false,
            XAxisLabelPosition = XAxisLabelPosition.Top,
            ShowToolTips = false,
            ShowLabels = false
        };
        _options = options;
    }

    private void WeeklyData()
    {
        string[] xaxis = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat",];
        var heatMapSeries = new List<ChartSeries>();
        var dataPoints = xaxis.Length;
        var data = new double[dataPoints];
        for (int i = 0; i < dataPoints; i++)
        {
            data[i] = i;
        }
        heatMapSeries.Add(new ChartSeries { Name = string.Empty, Data = data });
        _xLabels = xaxis;
        _series = heatMapSeries;
    }
}
Setting Minimum and Maximum Value

By default the HeatMap will use the minimum and maximum values of the data as a subset of 0.0 to 1.0 in order to determine the color of each cell. You can override this by including at least one MudHeatMapCell with a MinValue and/or a MaxValue as integers. When using the override, if entered more than once only the last time the Min/Max value pair is set will be used. The maximum value set will be the minimum value to show the final color in the series.

Example One
Example Two
40 %0.4Test 172 %0.72Test 264 %0.64Test 392 %0.92Test 4Student 180 %0.871 %0.7197 %0.9775 %0.75Student 292 %0.9284 %0.8485 %0.8597 %0.97Student 379 %0.7999 %0.9987 %0.8769 %0.69Student 4Less00.24750.4950.74249999999999990.99More
<MudTabs Rounded ApplyEffectsToContainer PanelClass="pa-6" Color="Color.Primary" Centered>
    <MudTabPanel Text="Example One">
        <MudChart ChartType="ChartType.HeatMap"
                    ChartSeries="@exampleOne"
                    ChartOptions="@chartOptions"
                    XAxisLabels="@testLabels"
                    Width="100%" Height="300px">
            <MudHeatMapCell Row="0" Column="0" MinValue="@(_useOverride ? 0 : default)" MaxValue="@(_useOverride ? .95 : null)" />
        </MudChart>
    </MudTabPanel>
    <MudTabPanel Text="Example Two">
        <MudChart ChartType="ChartType.HeatMap"
                    ChartSeries="@exampleTwo"
                    ChartOptions="@chartOptions"
                    XAxisLabels="@testLabels"
                    Width="100%" Height="300px">
            <MudHeatMapCell Row="0" Column="0" MinValue="@(_useOverride ? 0 : default)" MaxValue="@(_useOverride ? .95 : null)" />
        </MudChart>
    </MudTabPanel>
</MudTabs>
<MudStack Row Justify="Justify.Center" Spacing="5">
    <MudSwitch Class="mx-auto" Label="Include Override" @bind-Value="_useOverride" />
    <MudSwitch Class="mx-auto" Label="Show Legend" @bind-Value="_showLegend" @bind-Value:after="UpdateLegend" />
</MudStack>

@code {
    private const string COLOR_PERFECT = "#008f00";
    private const string COLOR_GOOD = "#66ff66";
    private const string COLOR_BAD = "#ff4d4d";
    private const string COLOR_HORRIBLE = "#b80000";
    private bool _useOverride;
    private bool _showLegend = true;

    private ChartOptions chartOptions = new()
    {
        ChartPalette = [COLOR_HORRIBLE, COLOR_BAD, COLOR_GOOD, COLOR_PERFECT],
        XAxisLabelPosition = XAxisLabelPosition.Top,
        ValueFormatString = "P0",
        ShowLegend = false,
    };

    private readonly string[] testLabels = ["Test 1", "Test 2", "Test 3", "Test 4"];

    private readonly List<ChartSeries> exampleOne =
    [
        new() { Name = "Student 1", Data = [.40, .72, .64, .92] },
        new() { Name = "Student 2", Data = [.80, .71, .97, .75] },
        new() { Name = "Student 3", Data = [.92, .84, .85, .97] },
        new() { Name = "Student 4", Data = [.79, .99, .87, .69] },
    ];

    private readonly List<ChartSeries> exampleTwo =
    [
        new() { Name = "Student 1", Data = [.40, .52, .64, .32] },
        new() { Name = "Student 2", Data = [.32, .65, .48, .66] },
        new() { Name = "Student 3", Data = [.35, .34, .55, .67] },
        new() { Name = "Student 4", Data = [.30, .63, .36, .62] },
    ];

    protected override void OnInitialized()
    {
        UpdateLegend();
    }

    private void UpdateLegend()
    {
        chartOptions.ShowLegend = _showLegend;
        StateHasChanged();
    }
}
Legend Display

By default, the Legend is displayed at the bottom of a HeatMap without the Label Values being displayed. You can customize it using the MudChart.LegendPosition and ChartOptions.ShowLegendLabels. A Myriad of customization options allow for the HeatMap of your choice.

Heat Map

9079.007972.007269.006962.006262.006255.005565.006570.0070Mo
N/A
72.19230498341.004135.003551.005149.004962.006269.006991.0091148.0148Te 2290.009062.006232.00325.00542.004263.006343.0043155.0155We3541.004135.003551.005149.004962.006269.006991.0091148.0148Th33.9133.91238490.009062.006232.00325.00542.004263.006343.0043155.0155Fr
NO
3541.004135.003551.005149.004962.006269.006991.0091148.0148Sa22.0022Jan90.0090Feb62.0062Mar32.0032Apr5.005May42.0042Jun63.0063Jul43.0043Aug155.0155SepSuLess55.0042.542.508080.00117.5117.5155155.0More
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

<MudGrid>
    <MudItem xs="2" Class="d-flex align-center">
        <MudRadioGroup T="Position" Value="_showLegendPosition" ValueChanged="@((Position value) => ShowLegendPositionChanged(value))" Class="d-flex flex-column align-center justify-center">

            <!-- Top Radio -->
            <MudItem xs="12" Class="d-flex justify-center align-center">
                <MudRadio Color="Color.Primary" Value="Position.Top" LabelPlacement="Placement.Top" Dense>Top</MudRadio>
            </MudItem>

            <MudItem xs="12" Class="d-flex justify-center py-2">
                <MudGrid Class="align-center justify-center">
                    <!-- Left Radio -->
                    <MudItem xs="4" Class="d-flex align-center justify-center">
                        <MudRadio Color="Color.Primary" Value="Position.Left" LabelPlacement="Placement.Left" Dense>L</MudRadio>
                    </MudItem>

                    <!-- Center Badge -->
                    <MudItem xs="4" Class="d-flex align-center justify-center">
                        <MudBadge Origin="@_anchorOrigin" Color="Color.Primary" Dot="true" Overlap Elevation="4" BadgeClass="ma-2">
                            <MudPaper Elevation="0" Outlined="true" Class="pa-6">
                                <MudText Align="Align.Center">Heat Map</MudText>
                            </MudPaper>
                        </MudBadge>
                    </MudItem>

                    <!-- Right Radio -->
                    <MudItem xs="4" Class="d-flex align-center justify-center">
                        <MudRadio Color="Color.Primary" Value="Position.Right" Dense>R</MudRadio>
                    </MudItem>
                </MudGrid>
            </MudItem>

            <!-- Bottom Radio -->
            <MudItem xs="12" Class="d-flex justify-center align-center">
                <MudRadio Color="Color.Primary" Value="Position.Bottom" LabelPlacement="Placement.Bottom" Dense>Bottom</MudRadio>
            </MudItem>

        </MudRadioGroup>
    </MudItem>
    <MudItem xs="10">
        <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" Height="400px" Width="100%"
                  XAxisLabels="@_xAxisLabels" ChartOptions="@_options" LegendPosition="_showLegendPosition">
            <MudHeatMapCell Row="0" Column="0">
                <!-- Font Icons act differently and should resize dynamically without specifying width/height -->
                <MudIcon Icon="material-symbols-outlined/database" Color="Color.Primary" />
            </MudHeatMapCell>
            <MudHeatMapCell Row="1" Column="0" Value="72.192304983">
                <!-- text tag doesn't need resized so no width/height -->
                <text dominant-baseline="middle" text-anchor="middle" fill="black" font-family="Helvetica" font-size="14">N/A</text>
            </MudHeatMapCell>
            <MudHeatMapCell Row="2" Column="0" Width="24" Height="24">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <!-- Face Circle -->
                    <circle cx="12" cy="12" r="11" stroke="black" stroke-width="1" fill="#FFD700" />
                    <!-- Left Eye -->
                    <circle cx="8" cy="9" r="1.5" fill="black" />
                    <!-- Right Eye -->
                    <circle cx="16" cy="9" r="1.5" fill="black" />
                    <!-- Smile -->
                    <path d="M7,14 Q12,17 17,14" stroke="black" stroke-width="1" fill="none" />
                </svg>
            </MudHeatMapCell>
            <MudHeatMapCell Row="3" Column="0" Width="24" Height="24">
                <MudIcon Icon="@Icons.Material.Filled.Face" Color="Color.Secondary" />
            </MudHeatMapCell>
            <MudHeatMapCell Row="4" Column="0" Value="33.912384" />
            <MudHeatMapCell Row="5" Column="0">
                NO
            </MudHeatMapCell>
            <MudHeatMapCell Row="6" Column="0" MudColor="@(new Utilities.MudColor("#FF5733"))" />
        </MudChart>
    </MudItem>
</MudGrid>
<MudGrid Spacing="2" Class="d-flex">
    <MudItem xs="2" Class="d-flex align-center">
        <MudButton OnClick="@RandomizeData" Variant="Variant.Filled">Randomize Data</MudButton>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="_enableGradient" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Smooth Gradient
        </MudCheckBox>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center justify-left">
        <MudSelect T="YAxisLabelPosition" @bind-Value="@_yAxisLabelPosition" @bind-Value:after="BuildOptions" FullWidth="true" Label="YAxis Labels">
            <MudSelectItem Value="YAxisLabelPosition.Left">Left</MudSelectItem>
            <MudSelectItem Value="YAxisLabelPosition.Right">Right</MudSelectItem>
            <MudSelectItem Value="YAxisLabelPosition.None">None</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center justify-left">
        <MudSelect T="XAxisLabelPosition" @bind-Value="@_xAxisLabelPosition" @bind-Value:after="BuildOptions" FullWidth="true" Label="XAxis Labels">
            <MudSelectItem Value="XAxisLabelPosition.Top">Top</MudSelectItem>
            <MudSelectItem Value="XAxisLabelPosition.Bottom">Bottom</MudSelectItem>
            <MudSelectItem Value="XAxisLabelPosition.None">None</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center">
        <MudNumericField Label="Number of Colors Used" @bind-Value="_colorCount" @bind-Value:after="BuildOptions" Min="1" Max="5" Step="1" />
    </MudItem>
    <MudItem xs="2"></MudItem>
    <MudItem xs="2" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="@_legendVisible" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Show Legend
        </MudCheckBox>
    </MudItem>
    <MudItem xs="3" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="@_showLegendValues" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Show Legend Values
        </MudCheckBox>
    </MudItem>
    <MudItem xs="2" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="@_showValueLabels" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Show Values
        </MudCheckBox>
    </MudItem>
    <MudItem xs="3" Class="d-flex align-center">
        <MudCheckBox T="bool" @bind-Value="@_showValueToolTips" @bind-Value:after="BuildOptions" Color="Color.Primary">
            Show Value Tooltips
        </MudCheckBox>
    </MudItem>
</MudGrid>

@code {
    private ChartOptions _options = new();
    private List<ChartSeries> _series = [];
    private XAxisLabelPosition _xAxisLabelPosition = XAxisLabelPosition.Bottom;
    private YAxisLabelPosition _yAxisLabelPosition = YAxisLabelPosition.Left;
    private bool _enableGradient = false;
    private bool _showValueLabels = true;
    private bool _showLegendValues = true;
    private bool _showValueToolTips = true;
    private bool _legendVisible = true;
    private Position _showLegendPosition = Position.Bottom;
    private Origin _anchorOrigin = Origin.BottomCenter;
    private int _colorCount = 5;
    private readonly string[] _colors = ["#5AC8FA", "#34C759", "#007AFF", "#FFCC00", "#e03131"];
    private readonly List<ChartSeries> _heatMapSeries =
    [
        new() { Name = "Mo", Data = [90, 79, 72, 69, 62, 62, 55, 65, 70] },
        new() { Name = "Te", Data = [35, 41, 35, 51, 49, 62, 69, 91, 148] },
        new() { Name = "We", Data = [22, 90, 62, 32, 05, 42, 63, 43, 155] },
        new() { Name = "Th", Data = [35, 41, 35, 51, 49, 62, 69, 91, 148] },
        new() { Name = "Fr", Data = [22, 90, 62, 32, 05, 42, 63, 43, 155] },
        new() { Name = "Sa", Data = [35, 41, 35, 51, 49, 62, 69, 91, 148] },
        new() { Name = "Su", Data = [22, 90, 62, 32, 05, 42, 63, 43, 155] }
    ];
    private string[] _xAxisLabels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"];

    protected override void OnInitialized()
    {
        base.OnInitialized();
        _series = _heatMapSeries;
        BuildOptions();
    }

    private void ShowLegendPositionChanged(Position value)
    {
        _showLegendPosition = value;
        _anchorOrigin = value switch
        {
            Position.Top => Origin.TopCenter,
            Position.Left => Origin.CenterLeft,
            Position.Right => Origin.CenterRight,
            Position.Bottom => Origin.BottomCenter,
            _ => _anchorOrigin
        };
        BuildOptions();
    }

    private void BuildOptions()
    {
        _options = new ChartOptions
        {
            XAxisLabelPosition = _xAxisLabelPosition,
            YAxisLabelPosition = _yAxisLabelPosition,
            EnableSmoothGradient = _enableGradient,
            ChartPalette = _colors.Take(_colorCount).ToArray(),
            ShowLabels = _showValueLabels,
            ShowLegend = _legendVisible,
            ShowLegendLabels = _showLegendValues
        };
        StateHasChanged();
    }

    private void RandomizeData()
    {
        var newSeries = new List<ChartSeries>();
        string[] days = ["Mo", "Te", "We", "Th", "Fr", "Sa", "Su"];
        const int DataPoints = 9;

        foreach (var day in days)
        {
            var data = new double[DataPoints];
            for (int i = 0; i < DataPoints; i++)
            {
                data[i] = Random.Shared.NextDouble() * 100;
            }
            newSeries.Add(new ChartSeries { Name = day, Data = data });
        }

        _series = newSeries;
    }
}
An unhandled error has occurred. Reload 🗙