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 HeatMapChartOptions and XAxisLabels are provided via the ChartLabels. These values will be used in order and if you wanted to skip a
column just adding string.Empty would work.
Number of Colors Selected: 1
<MudPaper Class="pa-4"> <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" ChartOptions="@_options" ChartLabels="@_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<double>> _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 { ShowToolTips = false, ChartPalette = _colors.Take(_colorCount).ToArray() }; _options = options; } private void RandomizeData() { string[] xaxis = ["A", string.Empty, "C",]; var heatMapSeries = new List<ChartSeries<double>>(); 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<double> { 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.
YAxis Labels
XAxis Labels
<MudPaper Class="pa-4"> <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" ChartOptions="@_options" ChartLabels="@_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<double>> _series = []; private HeatMapChartOptions _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 HeatMapChartOptions { ChartPalette = _colors, XAxisLabelPosition = _xAxisLabelPosition, YAxisLabelPosition = _yAxisLabelPosition }; _options = options; } private void RandomizeData() { string[] xaxis = ["A", "B", "C",]; var heatMapSeries = new List<ChartSeries<double>>(); 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<double> { 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.
<MudPaper Class="pa-4"> <MudChart ChartType="ChartType.HeatMap" ChartSeries="@_series" ChartOptions="@_options" ChartLabels="@_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<double>> _series = []; private HeatMapChartOptions _options = new(); private string[] _xLabels = []; protected override void OnInitialized() { base.OnInitialized(); BuildOptions(); RandomizeData(); } private void BuildOptions() { var options = new HeatMapChartOptions { ChartPalette = _colors, EnableSmoothGradient = _enableSmoothGradient }; _options = options; } private void RandomizeData() { string[] xaxis = ["A", string.Empty, "C",]; var heatMapSeries = new List<ChartSeries<double>>(); 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<double> { Name = x, Data = data }); } _xLabels = xaxis; _series = heatMapSeries; BuildOptions(); } }