Examples
Each HeatmapCell puts a Value at a Row and Column; rows and columns follow the order the data first names them, and crowded column labels are thinned.
ShowValues writes each value in its cell, Rows and Columns fix the order, and Color picks the theme colour of the largest value.
Levels splits the values into that many equal ranges, one shade each, and the legend shows a swatch per range instead of a gradient.
Playground
<HeatmapChart
ValueFormat="{0:N0}k requests"
Title="API requests by weekday and hour (thousands)"
Cells="@_cells" />
@code {
private static readonly string[] _days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
// Traffic follows the working day, with a lunch dip and quiet weekends.
private static readonly HeatmapCell[] _cells = _days
.SelectMany((day, d) => Enumerable.Range(0, 24).Select(hour =>
{
double working = hour is >= 8 and <= 18 ? (hour == 12 ? 28 : 40) : hour is >= 6 and <= 21 ? 14 : 4;
double load = (d >= 5 ? working * 0.35 : working) + (hour * 7 + d * 3) % 6;
return new HeatmapCell(day, hour.ToString("00"), Math.Round(load));
}))
.ToArray();
}API
<HeatmapChart>
DaisyBlazor.ChartsParameters
- AspectRatio double= 1.78
Width divided by height. The chart keeps this shape at any width; its text keeps its size.
- Cells IReadOnlyList<
HeatmapCell> = []The values. Each HeatmapCell puts a Value at a Row and Column; a repeated pair is summed.
- Color string= null
CSS colour of the largest value; smaller values blend it into the page background. Defaults to the theme's primary colour.
- Columns IReadOnlyList<
string> = nullColumn order, left to right. Defaults to the column names in order of first appearance; columns not listed are left out.
- Levels int?= null
Number of discrete colour steps (2 to 10). When set, the values are split into that many equal ranges between Min and Max, each drawn in one shade, and the legend shows one swatch per range. When null (the default) the shading is continuous.
- Max double?= null
Value drawn as the full colour; larger values are clamped to it. Defaults to the largest value.
- Min double?= null
Value drawn as the faintest shade; smaller values are clamped to it. Defaults to 0, or to the smallest value when one is negative.
- RowHeight double?= null
Height of each row in px, for a chart that lays its categories out as rows (horizontal bars, a Gantt's lanes, a heatmap's rows…): its height then follows its number of rows instead of AspectRatio, so a long list keeps readable rows at any width. A chart, or an orientation, without rows ignores it.
- Rows IReadOnlyList<
string> = nullRow order, top to bottom. Defaults to the row names in order of first appearance; rows not listed are left out.
- ShowLegend bool= true
Show the colour scale, from Min to Max, under the chart.
- ShowTitle bool= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
- ShowValues bool= false
Write each value inside its cell, where it fits.
- Title string= null
Optional heading rendered above the chart; it is also the chart's accessible name.
- ValueFormat string= "{0:#,0.##}"
Format string for values in cells, tooltips and the legend, e.g. "{0:N0} requests". With the default and Levels, the legend shows as many decimals as the step size needs.
- Width string= "100%"
CSS width of the chart wrapper.
- Class string= null
Additional CSS classes merged onto the w-full wrapper.
- Style string= null
Inline styles appended after the width on the wrapper.