Lumeo

Calendar Heatmap Chart

Display data density across a calendar year, similar to GitHub contribution graphs. Each cell represents a day, with color intensity showing the value.

Installation

dotnet add package Lumeo.Charts

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<CalendarHeatmapChart />
Heatmap with 120 data points.
NameValue
12025-09-01, 1
22025-02-15, 5
32025-03-03, 2
42025-09-22, 5
52025-03-05, 8
62025-03-27, 2
72025-07-04, 3
82025-05-20, 2
92025-07-08, 0
102025-10-25, 6
112025-05-26, 1
122025-02-02, 7
132025-10-25, 5
142025-01-17, 7
152025-02-23, 9
162025-09-10, 5
172025-03-10, 0
182025-04-23, 6
192025-10-27, 0
202025-07-15, 8
212025-10-01, 4
222025-02-24, 0
232025-01-19, 8
242025-08-17, 1
252025-04-02, 8
262025-04-16, 7
272025-02-22, 0
282025-08-09, 5
292025-01-19, 4
302025-09-15, 6
312025-03-21, 0
322025-05-14, 2
332025-01-26, 7
342025-01-26, 5
352025-01-05, 8
362025-06-10, 5
372025-07-02, 0
382025-10-30, 0
392025-01-02, 0
402025-08-27, 0
412025-11-30, 10
422025-06-18, 4
432025-08-14, 0
442025-05-17, 1
452025-06-09, 8
462025-07-14, 4
472025-04-19, 9
482025-08-03, 8
492025-01-08, 9
502025-12-16, 3
… and 70 more data points
Heatmap with 120 data points.
NameValue
12025-09-01, 1
22025-02-15, 5
32025-03-03, 2
42025-09-22, 5
52025-03-05, 8
62025-03-27, 2
72025-07-04, 3
82025-05-20, 2
92025-07-08, 0
102025-10-25, 6
112025-05-26, 1
122025-02-02, 7
132025-10-25, 5
142025-01-17, 7
152025-02-23, 9
162025-09-10, 5
172025-03-10, 0
182025-04-23, 6
192025-10-27, 0
202025-07-15, 8
212025-10-01, 4
222025-02-24, 0
232025-01-19, 8
242025-08-17, 1
252025-04-02, 8
262025-04-16, 7
272025-02-22, 0
282025-08-09, 5
292025-01-19, 4
302025-09-15, 6
312025-03-21, 0
322025-05-14, 2
332025-01-26, 7
342025-01-26, 5
352025-01-05, 8
362025-06-10, 5
372025-07-02, 0
382025-10-30, 0
392025-01-02, 0
402025-08-27, 0
412025-11-30, 10
422025-06-18, 4
432025-08-14, 0
442025-05-17, 1
452025-06-09, 8
462025-07-14, 4
472025-04-19, 9
482025-08-03, 8
492025-01-08, 9
502025-12-16, 3
… and 70 more data points

The same year with a custom Colors gradient driving the visual map and the ECharts Toolbox enabled.

Heatmap with 120 data points.
NameValue
12025-09-01, 1
22025-02-15, 5
32025-03-03, 2
42025-09-22, 5
52025-03-05, 8
62025-03-27, 2
72025-07-04, 3
82025-05-20, 2
92025-07-08, 0
102025-10-25, 6
112025-05-26, 1
122025-02-02, 7
132025-10-25, 5
142025-01-17, 7
152025-02-23, 9
162025-09-10, 5
172025-03-10, 0
182025-04-23, 6
192025-10-27, 0
202025-07-15, 8
212025-10-01, 4
222025-02-24, 0
232025-01-19, 8
242025-08-17, 1
252025-04-02, 8
262025-04-16, 7
272025-02-22, 0
282025-08-09, 5
292025-01-19, 4
302025-09-15, 6
312025-03-21, 0
322025-05-14, 2
332025-01-26, 7
342025-01-26, 5
352025-01-05, 8
362025-06-10, 5
372025-07-02, 0
382025-10-30, 0
392025-01-02, 0
402025-08-27, 0
412025-11-30, 10
422025-06-18, 4
432025-08-14, 0
442025-05-17, 1
452025-06-09, 8
462025-07-14, 4
472025-04-19, 9
482025-08-03, 8
492025-01-08, 9
502025-12-16, 3
… and 70 more data points

Shape-aware skeleton with reserved space for legend and axes — no layout shift when real data arrives.

API Reference

CalendarHeatmapChart

Property Type Default Description
Data object? null Calendar data as [date, value] pairs.
Year int current year The year to display.
VisualMapMin double 0 Minimum value for color mapping.
VisualMapMax double 10 Maximum value for color mapping.
Colors List<string>? null Custom color range (defaults to green shades).
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)
ShowTooltip bool true Enables the hover tooltip showing date and value.
Width string "100%" CSS width of the chart container.
Height string "350px" CSS height of the chart container.
Theme string? null Optional ECharts theme name override.
PhantomCycleMs int 1400 Phantom-mode refresh interval in milliseconds. Lower = faster data cycling while loading.
ShowDataLabels bool false When true, displays value labels inside each calendar cell.
LabelPosition string "inside" Position of data labels relative to each cell.
LabelFormat string? null Optional ECharts label formatter string for cell labels.
DataZoom bool false Enables the interactive data-zoom slider beneath the chart.
Toolbox bool false Shows the ECharts toolbox with export and zoom controls.
ColorPalette List<string>? null Alternate full color palette applied to the chart.
AnimationDuration int? null Animation duration in milliseconds when data changes.
AnimationEasing string? null ECharts easing function name for animation curves.

Cookies & consent

We use a minimal set of cookies to run the site and optionally measure anonymous usage to improve it. You choose what's on.Read the privacy policy.