HeatmapChart
CSS-based heatmap grid with configurable data values, rows, columns, and color scheme.
Default Heatmap
Standard 3x4 heatmap grid with gold color scheme and default data values.
2
5
8
3
7
1
9
4
6
3
8
2
5
9
1
7
4
6
8
3
LowHigh
Custom Grid (4x6)
Larger grid layout with 24 cells for detailed data visualization.
2
5
8
3
7
1
9
4
6
10
2
7
5
3
8
1
6
9
4
10
7
2
5
8
LowHigh
Green Color Scheme
Green heatmap for environmental or health-related data displays.
1
3
5
7
9
2
4
6
8
10
3
5
7
9
1
LowHigh
Red Color Scheme
Red heatmap for alert levels and critical threshold visualization.
8
3
6
9
2
7
4
10
1
5
8
3
LowHigh
Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | text | "3,7,2,9,5,1,8,4,6,10,2,7" | Comma-separated values (0-10) for each cell |
rows | text | "3" | Number of rows in the grid |
cols | text | "4" | Number of columns in the grid |
colors | text | "gold" | Color scheme (gold, green, blue, red) |