Heatmap Chart
Display density or intensity across two dimensions using color gradients. Useful for activity patterns, correlation matrices, and time-based analysis.
Installation
dotnet add package Lumeo.Charts
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <HeatmapChart />
| Category | Series 1 |
|---|---|
| Mon | 0, 0, 42 |
| Tue | 1, 0, 68 |
| Wed | 2, 0, 55 |
| Thu | 3, 0, 73 |
| Fri | 4, 0, 61 |
| Sat | 5, 0, 29 |
| Sun | 6, 0, 18 |
Support ticket volume by day of week and time of day. Darker cells indicate peak load periods, helping teams plan staffing accordingly.
| Category | Series 1 |
|---|---|
| Jan | 0, 0, 210 |
| Feb | 1, 0, 185 |
| Mar | 2, 0, 240 |
| Apr | 3, 0, 275 |
| May | 4, 0, 310 |
| Jun | 5, 0, 290 |
| Jul | 6, 0, 320 |
| Aug | 7, 0, 340 |
| Sep | 8, 0, 305 |
| Oct | 9, 0, 360 |
| Nov | 10, 0, 380 |
| Dec | 11, 0, 420 |
Monthly revenue heatmap across four regions. Custom warm color range maps low-to-high values from cream to deep red.
| Category | Series 1 |
|---|---|
| 0h | 0, 0, 0.8 |
| 3h | 1, 0, 0.5 |
| 6h | 2, 0, 0.3 |
| 9h | 3, 0, 1.2 |
| 12h | 4, 0, 2.1 |
| 15h | 5, 0, 1.8 |
| 18h | 6, 0, 0.9 |
| 21h | 7, 0, 0.4 |
Error rate per hour slot and weekday. Data labels always visible; DataZoom and Toolbox enabled for deeper exploration.
| Category | Series 1 |
|---|---|
| Dashboard | 0, 0, 95 |
| Reports | 1, 0, 62 |
| API | 2, 0, 18 |
| Alerts | 3, 0, 45 |
| Export | 4, 0, 30 |
Feature usage rate (%) for seven user segments across five key features. A green-to-violet scale highlights low-adoption gaps.
| Category | Series 1 |
|---|---|
| Mon | 0, 0, 42 |
| Tue | 1, 0, 68 |
| Wed | 2, 0, 55 |
| Thu | 3, 0, 73 |
| Fri | 4, 0, 61 |
| Sat | 5, 0, 29 |
| Sun | 6, 0, 18 |
Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.
API Reference
HeatmapChart
| Property | Type | Default | Description |
|---|---|---|---|
| XCategories | List<string> | [] | X-axis category labels. |
| YCategories | List<string> | [] | Y-axis category labels. |
| Data | List<double[]> | [] | Data points as [x, y, value] arrays. |
| Colors | List<string>? | null | Custom color range for the visual map. |
| IsLoading | bool | false | When true, renders a shape-matched loading skeleton in place of the chart. Bind to your async fetch state. |
| ShowLoadingSkeleton | bool | true | Set to false to opt out of the skeleton (chart area stays empty while IsLoading is true). |
| SkeletonKind | ChartSkeletonKind | (chart default) | Override the skeleton silhouette (Bars, Line, Area, Pie, Scatter, Grid, Generic). |
| SkeletonStyle | ChartSkeletonStyle | Phantom | Phantom renders the real chart with placeholder data and morphs to real data via ECharts animation. Silhouette falls back to the legacy SVG skeleton overlay. |
| ShowLoadingLabel | bool | true | Shows a small "Loading…" pill in the top-right corner whenever IsLoading is true. Layered on top of any SkeletonStyle. Set to false for bare visuals. (rc.18) |
| LoadingText | string? | "Loading…" | Label rendered next to the spinner inside the loading pill. Set to empty to show the spinner alone. (rc.18) |
| ShowLegend | bool | true | Toggles the visual-map legend that explains the heatmap color scale. |
| ShowTooltip | bool | true | Shows the per-cell tooltip on hover with x/y categories and value. |
| Width | string | "100%" | CSS width applied to the chart container. |
| Height | string | "350px" | CSS height applied to the chart container. |
| Theme | string? | null | Overrides the ECharts theme; null follows the app's light/dark mode. |
| ShowDataLabels | bool | false | Renders the numeric value inside each heatmap cell. |
| LabelPosition | string | "inside" | Position of cell data labels (e.g. inside, top, bottom). |
| LabelFormat | string? | null | ECharts format string applied to cell data labels. |
| DataZoom | bool | false | Enables zoom/pan controls along the heatmap axes. |
| Toolbox | bool | false | Shows the toolbox with save-as-image, restore, and view controls. |
| ColorPalette | List<string>? | null | Overrides the chart's base color palette; alternative to per-cell Colors gradient. |
| AnimationDuration | int? | null | Override entry animation duration (ms); null uses the ECharts default. |
| AnimationEasing | string? | null | ECharts easing function name applied to entry animations. |
| PhantomCycleMs | int | 1400 | Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading. |
| MarkLine | EChartMarkLine? | null | Optional mark line(s) overlaid on the heatmap grid. |
| MarkPoint | EChartMarkPoint? | null | Optional mark point annotations overlaid on the heatmap. |
| MarkArea | EChartMarkArea? | null | Optional mark area highlight overlaid on the heatmap grid. |