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.
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
.
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.
<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.
<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.
<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.
<MudTabs Rounded ApplyEffectsToContainer PanelClass="pa-6" Color="Color.Primary" Centered> <MudTabPanel Text="Example One"> <MudChart ChartType="ChartType.HeatMap" ChartSeries="" ChartOptions="" XAxisLabels="" 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="" ChartOptions="" XAxisLabels="" 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
<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="" 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; } }