Heatmap Chart Card

A matrix heatmap in the dashboard card shell - weekday × hour, region × month, anything with two axes. Cells mix the accent into the chart track by value so the ramp follows the theme in both modes; hovering a cell rings it, darkens its row and column labels, and swaps the headline to that cell's value. Plain CSS grid, no chart library.

Active users

Provided data

+5.2%

Active users: illustrative source-shaped fixture data
Category	Value
Mon 00:00	4
Mon 02:00	2
Mon 04:00	1
Mon 06:00	6
Mon 08:00	28
Mon 10:00	46
Mon 12:00	52
Mon 14:00	58
Mon 16:00	44
Mon 18:00	30
Mon 20:00	18
Mon 22:00	9
Tue 00:00	3
Tue 02:00	2
Tue 04:00	2
Tue 06:00	8
Tue 08:00	32
Tue 10:00	50
Tue 12:00	55
Tue 14:00	62
Tue 16:00	48
Tue 18:00	33
Tue 20:00	20
Tue 22:00	10
Wed 00:00	5
Wed 02:00	3
Wed 04:00	1
Wed 06:00	7
Wed 08:00	30
Wed 10:00	48
Wed 12:00	57
Wed 14:00	60
Wed 16:00	47
Wed 18:00	31
Wed 20:00	19
Wed 22:00	8
Thu 00:00	4
Thu 02:00	2
Thu 04:00	2
Thu 06:00	9
Thu 08:00	34
Thu 10:00	52
Thu 12:00	60
Thu 14:00	64
Thu 16:00	50
Thu 18:00	35
Thu 20:00	22
Thu 22:00	11
Fri 00:00	6
Fri 02:00	3
Fri 04:00	2
Fri 06:00	8
Fri 08:00	29
Fri 10:00	44
Fri 12:00	49
Fri 14:00	46
Fri 16:00	36
Fri 18:00	24
Fri 20:00	15
Fri 22:00	9
Sat 00:00	8
Sat 02:00	5
Sat 04:00	3
Sat 06:00	4
Sat 08:00	12
Sat 10:00	20
Sat 12:00	26
Sat 14:00	28
Sat 16:00	25
Sat 18:00	22
Sat 20:00	16
Sat 22:00	12
Sun 00:00	7
Sun 02:00	4
Sun 04:00	2
Sun 06:00	3
Sun 08:00	10
Sun 10:00	17
Sun 12:00	22
Sun 14:00	24
Sun 16:00	23
Sun 18:00	20
Sun 20:00	14
Sun 22:00	10

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="heatmap-chart-card"/>;}

Data

Each entry in rows has a label and values; columns supplies the corresponding column labels. The matrix adapts to added rows and columns. Set color for a different ramp or max for a fixed saturation ceiling. Supplied ranges can carry their own data, headline and delta. Use onRangeChange for application loading, or inspect the default preview’s three illustrative snapshots.

Revenue by region

Provided data

+11.8%

Revenue by region: illustrative source-shaped fixture data
Category	Value
EMEA · Jan	42
EMEA · Feb	48
EMEA · Mar	55
EMEA · Apr	61
EMEA · May	70
EMEA · Jun	74
AMER · Jan	38
AMER · Feb	40
AMER · Mar	47
AMER · Apr	52
AMER · May	58
AMER · Jun	66
APAC · Jan	21
APAC · Feb	25
APAC · Mar	29
APAC · Apr	36
APAC · May	41
APAC · Jun	49
LATAM · Jan	12
LATAM · Feb	14
LATAM · Mar	15
LATAM · Apr	19
LATAM · May	24
LATAM · Jun	27

usage

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="heatmap-chart-card" rows={[{label:'Mon',values:[2,5,8]},{label:'Tue',values:[4,3,6]}]} columns={['08','12','16']}/>;}

Advanced playground, API and recovery states ↗

Heatmap Chart Card

Active users

Provided data

+5.2%

Active users: illustrative source-shaped fixture data
Category	Value
Mon 00:00	4
Mon 02:00	2
Mon 04:00	1
Mon 06:00	6
Mon 08:00	28
Mon 10:00	46
Mon 12:00	52
Mon 14:00	58
Mon 16:00	44
Mon 18:00	30
Mon 20:00	18
Mon 22:00	9
Tue 00:00	3
Tue 02:00	2
Tue 04:00	2
Tue 06:00	8
Tue 08:00	32
Tue 10:00	50
Tue 12:00	55
Tue 14:00	62
Tue 16:00	48
Tue 18:00	33
Tue 20:00	20
Tue 22:00	10
Wed 00:00	5
Wed 02:00	3
Wed 04:00	1
Wed 06:00	7
Wed 08:00	30
Wed 10:00	48
Wed 12:00	57
Wed 14:00	60
Wed 16:00	47
Wed 18:00	31
Wed 20:00	19
Wed 22:00	8
Thu 00:00	4
Thu 02:00	2
Thu 04:00	2
Thu 06:00	9
Thu 08:00	34
Thu 10:00	52
Thu 12:00	60
Thu 14:00	64
Thu 16:00	50
Thu 18:00	35
Thu 20:00	22
Thu 22:00	11
Fri 00:00	6
Fri 02:00	3
Fri 04:00	2
Fri 06:00	8
Fri 08:00	29
Fri 10:00	44
Fri 12:00	49
Fri 14:00	46
Fri 16:00	36
Fri 18:00	24
Fri 20:00	15
Fri 22:00	9
Sat 00:00	8
Sat 02:00	5
Sat 04:00	3
Sat 06:00	4
Sat 08:00	12
Sat 10:00	20
Sat 12:00	26
Sat 14:00	28
Sat 16:00	25
Sat 18:00	22
Sat 20:00	16
Sat 22:00	12
Sun 00:00	7
Sun 02:00	4
Sun 04:00	2
Sun 06:00	3
Sun 08:00	10
Sun 10:00	17
Sun 12:00	22
Sun 14:00	24
Sun 16:00	23
Sun 18:00	20
Sun 20:00	14
Sun 22:00	10

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

Download React package Installation guide

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="heatmap-chart-card"/>;}

Data

Revenue by region

Provided data

+11.8%

Revenue by region: illustrative source-shaped fixture data
Category	Value
EMEA · Jan	42
EMEA · Feb	48
EMEA · Mar	55
EMEA · Apr	61
EMEA · May	70
EMEA · Jun	74
AMER · Jan	38
AMER · Feb	40
AMER · Mar	47
AMER · Apr	52
AMER · May	58
AMER · Jun	66
APAC · Jan	21
APAC · Feb	25
APAC · Mar	29
APAC · Apr	36
APAC · May	41
APAC · Jun	49
LATAM · Jan	12
LATAM · Feb	14
LATAM · Mar	15
LATAM · Apr	19
LATAM · May	24
LATAM · Jun	27

usage

'use client';
import {SourceChartPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceChartPreview id="heatmap-chart-card" rows={[{label:'Mon',values:[2,5,8]},{label:'Tue',values:[4,3,6]}]} columns={['08','12','16']}/>;}

Advanced playground, API and recovery states ↗

Heatmap Chart Card

Active users

Installation

Data

Revenue by region

Search Helios UI

Heatmap Chart Card

Active users

Installation

Data

Revenue by region

Search Helios UI