Heatmap Chart

Color-coded matrix for intensity visualization across two dimensions.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/charts

Examples

⁽⁷⁾

Properties

⁽⁵⁹⁾

Playground

Loading demo…

import
 
{
 
HeatmapChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
DAYS
,
 
SESSIONS
,
 
UTILIZATION
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<HeatmapChart
      
title
=
"Support ticket load"
      
subtitle
=
"Average tickets per hour"
      
height
=
{
320
}
      
data
=
{
{
 rows
:
 
SESSIONS
,
 cols
:
 
DAYS
,
 values
:
 
UTILIZATION
 
}
}
      
cellSize
=
{
{
 width
:
 
48
,
 height
:
 
44
 
}
}
      
gap
=
{
4
}
      
colorScale
=
{
{
        min
:
 
0
,
        max
:
 
30
,
        colors
:
 
[
'#EBF4FF'
,
 
'#60A5FA'
,
 
'#1D4ED8'
]
,
      
}
}
      
xAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Weekday'
,
      
}
}
      
yAxis
=
{
{
        show
:
 
true
,
        title
:
 
'Shift'
,
      
}
}
      
grid
=
{
{
 show
:
 
false
 
}
}
      
legend
=
{
{
        show
:
 
true
,
        position
:
 
'bottom'
,
        items
:
 
[
          
{
 label
:
 
'Low'
,
 color
:
 
'#EBF4FF'
 
}
,
          
{
 label
:
 
'High'
,
 color
:
 
'#1D4ED8'
 
}
,
        
]
,
      
}
}
      
tooltip
=
{
{
 show
:
 
true
 
}
}
    
/>
  
)
;
}

GitHub-style contribution calendar generated with a 7x53 grid (weeks x weekdays) and a 5-step color scale.

Loading demo…

import
 
{
 
HeatmapChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
COLUMNS
,
 CONTRIBUTION_MATRIX
,
 
PALETTE
,
 WEEKDAY_LABELS 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<HeatmapChart
      
title
=
"Weekly contributions"
      
subtitle
=
"GitHub-style activity calendar"
      
height
=
{
280
}
      
data
=
{
{
 rows
:
 WEEKDAY_LABELS
,
 cols
:
 
COLUMNS
,
 values
:
 CONTRIBUTION_MATRIX 
}
}
      
cellSize
=
{
{
 width
:
 
12
,
 height
:
 
12
 
}
}
      
gap
=
{
2
}
      
colorScale
=
{
{
 min
:
 
0
,
 max
:
 
4
,
 colors
:
 
PALETTE
 
}
}
      
xAxis
=
{
{
 show
:
 
false
 
}
}
      
yAxis
=
{
{
        show
:
 
true
,
        labelFormatter
:
 
(
value
)
 
=>
 WEEKDAY_LABELS
[
value
]
 
??
 
''
,
      
}
}
      
legend
=
{
{
        show
:
 
true
,
        position
:
 
'bottom'
,
        items
:
 
[
          
{
 label
:
 
'Less'
,
 color
:
 
PALETTE
[
0
]
 
}
,
          
{
 label
:
 
'More'
,
 color
:
 
PALETTE
[
PALETTE
.
length 
-
 
1
]
 
}
,
        
]
,
      
}
}
      
tooltip
=
{
{
 show
:
 
true
 
}
}
    
/>
  
)
;
}

Visualizes employee engagement survey scores per team across key dimensions to spotlight strengths and low-score focus areas.

Loading demo…

import
 
{
 
HeatmapChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
DIMENSIONS
,
 
SCORES
,
 
TEAMS
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<HeatmapChart
      
title
=
"Employee engagement survey"
      
subtitle
=
"Dimension scores (1-5) by team"
      
height
=
{
360
}
      
data
=
{
{
 rows
:
 
TEAMS
,
 cols
:
 
DIMENSIONS
,
 values
:
 
SCORES
 
}
}
      
cellSize
=
{
{
 width
:
 
96
,
 height
:
 
48
 
}
}
      
gap
=
{
4
}
      
colorScale
=
{
{
        min
:
 
1
,
        max
:
 
5
,
        stops
:
 
[
          
{
 value
:
 
2.5
,
 color
:
 
'#F97316'
 
}
,
          
{
 value
:
 
3.5
,
 color
:
 
'#FACC15'
 
}
,
          
{
 value
:
 
4.5
,
 color
:
 
'#22C55E'
 
}
,
        
]
,
      
}
}
      
valueFormatter
=
{
(
{
 value 
}
)
 
=>
 
`${value.toFixed(1)} score`
}
      showCellLabels
      
xAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Engagement dimension'
 
}
}
      
yAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Team'
 
}
}
      
legend
=
{
{
        show
:
 
true
,
        position
:
 
'bottom'
,
        items
:
 
[
          
{
 label
:
 
'Needs focus (< 3.0)'
,
 color
:
 
'#F97316'
 
}
,
          
{
 label
:
 
'Steady (3-4)'
,
 color
:
 
'#FACC15'
 
}
,
          
{
 label
:
 
'High confidence (> 4)'
,
 color
:
 
'#22C55E'
 
}
,
        
]
,
      
}
}
      
cellCornerRadius
=
{
4
}
      
hoverHighlight
=
{
{
 rowOpacity
:
 
0.12
,
 columnOpacity
:
 
0.12
 
}
}
      
tooltip
=
{
{
 show
:
 
true
,
 aggregate
:
 
false
 
}
}
    
/>
  
)
;
}

Heatmap of average CPU utilization across infrastructure clusters and daily time blocks, highlighting hotspots that approach saturation bands.

Loading demo…

import
 
{
 
HeatmapChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
CLUSTERS
,
 CPU_UTILIZATION
,
 TIME_BLOCKS 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<HeatmapChart
      
title
=
"Infrastructure CPU utilization"
      
subtitle
=
"Average utilization (%) across compute clusters"
      
height
=
{
360
}
      
data
=
{
{
 rows
:
 
CLUSTERS
,
 cols
:
 TIME_BLOCKS
,
 values
:
 CPU_UTILIZATION 
}
}
      
cellSize
=
{
{
 width
:
 
90
,
 height
:
 
44
 
}
}
      
gap
=
{
6
}
      
colorScale
=
{
{
        min
:
 
0
,
        max
:
 
100
,
        stops
:
 
[
          
{
 value
:
 
35
,
 color
:
 
'#0EA5E9'
 
}
,
          
{
 value
:
 
60
,
 color
:
 
'#FACC15'
 
}
,
          
{
 value
:
 
80
,
 color
:
 
'#F97316'
 
}
,
          
{
 value
:
 
95
,
 color
:
 
'#DC2626'
 
}
,
        
]
,
      
}
}
      
valueFormatter
=
{
(
{
 value 
}
)
 
=>
 
`${Math.round(value)}% utilized`
}
      
showCellLabels
=
{
(
{
 width
,
 height 
}
)
 
=>
 width 
>=
 
70
 
&&
 height 
>=
 
38
}
      
xAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Time block'
 
}
}
      
yAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Cluster'
 
}
}
    
grid
=
{
{
 show
:
 
true
,
 style
:
 
'dashed'
 
}
}
      
legend
=
{
{
        show
:
 
true
,
        position
:
 
'bottom'
,
        items
:
 
[
          
{
 label
:
 
'Healthy (< 60%)'
,
 color
:
 
'#0EA5E9'
 
}
,
          
{
 label
:
 
'Watch (60-80%)'
,
 color
:
 
'#FACC15'
 
}
,
          
{
 label
:
 
'Hotspot (> 80%)'
,
 color
:
 
'#F97316'
 
}
,
        
]
,
      
}
}
      
cellCornerRadius
=
{
6
}
      
hoverHighlight
=
{
{
 rowOpacity
:
 
0.16
,
 columnOpacity
:
 
0.12
 
}
}
      
tooltip
=
{
{
 show
:
 
true
,
 aggregate
:
 
false
 
}
}
    
/>
  
)
;
}

Tracks marketing email click-through rates by segment and day of week to quickly surface best-performing send windows.

Loading demo…

import
 
{
 
HeatmapChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 CLICK_RATES
,
 
DAYS
,
 
SEGMENTS
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<HeatmapChart
      
title
=
"Email click-through performance"
      
subtitle
=
"Daily CTR (%) across audience segments"
      
height
=
{
320
}
      
data
=
{
{
 rows
:
 
SEGMENTS
,
 cols
:
 
DAYS
,
 values
:
 CLICK_RATES 
}
}
      
cellSize
=
{
{
 width
:
 
80
,
 height
:
 
44
 
}
}
      
gap
=
{
4
}
      
colorScale
=
{
{
        min
:
 
10
,
        max
:
 
45
,
        colors
:
 
[
'#F5F3FF'
,
 
'#C4B5FD'
,
 
'#7C3AED'
]
,
      
}
}
      
valueFormatter
=
{
(
{
 value 
}
)
 
=>
 
`${Math.round(value)}% CTR`
}
      
showCellLabels
=
{
(
{
 cell 
}
)
 
=>
 cell
.
value 
>=
 
32
}
      
xAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Day of week'
 
}
}
      
yAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Segment'
 
}
}
      
legend
=
{
{
        show
:
 
true
,
        position
:
 
'bottom'
,
        items
:
 
[
          
{
 label
:
 
'Baseline'
,
 color
:
 
'#F5F3FF'
 
}
,
          
{
 label
:
 
'Above average'
,
 color
:
 
'#C4B5FD'
 
}
,
          
{
 label
:
 
'Top performing'
,
 color
:
 
'#7C3AED'
 
}
,
        
]
,
      
}
}
      
cellCornerRadius
=
{
6
}
      
hoverHighlight
=
{
{
 rowOpacity
:
 
0.12
,
 columnOpacity
:
 
0.1
 
}
}
      
tooltip
=
{
{
 show
:
 
true
,
 aggregate
:
 
false
 
}
}
    
/>
  
)
;
}

Shows quality assurance pass rates for each regression suite across release candidates, emphasizing areas that fall below the team’s quality threshold.

Loading demo…

import
 
{
 
HeatmapChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 PASS_RATES
,
 
RELEASES
,
 
SUITES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<HeatmapChart
      
title
=
"QA pass rates by release"
      
subtitle
=
"Regression suites vs. release candidates"
      
height
=
{
340
}
      
data
=
{
{
 rows
:
 
SUITES
,
 cols
:
 
RELEASES
,
 values
:
 PASS_RATES 
}
}
      
cellSize
=
{
{
 width
:
 
110
,
 height
:
 
48
 
}
}
      
gap
=
{
4
}
      
colorScale
=
{
{
        min
:
 
80
,
        max
:
 
100
,
        stops
:
 
[
          
{
 value
:
 
85
,
 color
:
 
'#F87171'
 
}
,
          
{
 value
:
 
92
,
 color
:
 
'#FBBF24'
 
}
,
          
{
 value
:
 
98
,
 color
:
 
'#34D399'
 
}
,
        
]
,
      
}
}
      
valueFormatter
=
{
(
{
 value 
}
)
 
=>
 
`${Math.round(value)}% pass`
}
      showCellLabels
      
xAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Release candidate'
 
}
}
      
yAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Test suite'
 
}
}
      
legend
=
{
{
        show
:
 
true
,
        position
:
 
'bottom'
,
        items
:
 
[
          
{
 label
:
 
'Below target (< 92%)'
,
 color
:
 
'#F87171'
 
}
,
          
{
 label
:
 
'At risk (92-97%)'
,
 color
:
 
'#FBBF24'
 
}
,
          
{
 label
:
 
'Meets target (> 97%)'
,
 color
:
 
'#34D399'
 
}
,
        
]
,
      
}
}
      
cellCornerRadius
=
{
5
}
      
hoverHighlight
=
{
{
 rowOpacity
:
 
0.14
,
 columnOpacity
:
 
0.12
 
}
}
      
tooltip
=
{
{
 show
:
 
true
,
 aggregate
:
 
false
 
}
}
    
/>
  
)
;
}

Maps support ticket backlog volume across product modules and priority levels to expose severity hot spots.

Loading demo…

import
 
{
 
HeatmapChart
 
}
 
from
 
'@platform-blocks/charts'
;
 
import
 
{
 
BACKLOG
,
 
MODULES
,
 
PRIORITIES
 
}
 
from
 
'./data'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<HeatmapChart
      
title
=
"Support backlog by module"
      
subtitle
=
"Open tickets by severity priority"
      
height
=
{
360
}
      
data
=
{
{
 rows
:
 
MODULES
,
 cols
:
 
PRIORITIES
,
 values
:
 
BACKLOG
 
}
}
      
cellSize
=
{
{
 width
:
 
108
,
 height
:
 
48
 
}
}
      
gap
=
{
6
}
      
colorScale
=
{
{
        
type
:
 
'log'
,
        min
:
 
1
,
        max
:
 
32
,
        colors
:
 
[
'#EFF6FF'
,
 
'#60A5FA'
,
 
'#1D4ED8'
]
,
      
}
}
      
valueFormatter
=
{
(
{
 value 
}
)
 
=>
 
`${value} ${value === 1 ? 'ticket' : 'tickets'}`
}
      
showCellLabels
=
{
(
{
 cell 
}
)
 
=>
 cell
.
value 
>=
 
8
}
      
xAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Priority'
 
}
}
      
yAxis
=
{
{
 show
:
 
true
,
 title
:
 
'Product module'
 
}
}
      
legend
=
{
{
        show
:
 
true
,
        position
:
 
'bottom'
,
        items
:
 
[
          
{
 label
:
 
'Low volume'
,
 color
:
 
'#EFF6FF'
 
}
,
          
{
 label
:
 
'Rising load'
,
 color
:
 
'#60A5FA'
 
}
,
          
{
 label
:
 
'Critical backlog'
,
 color
:
 
'#1D4ED8'
 
}
,
        
]
,
      
}
}
      
cellCornerRadius
=
{
4
}
      
hoverHighlight
=
{
{
 rowOpacity
:
 
0.14
,
 columnOpacity
:
 
0.12
 
}
}
      
tooltip
=
{
{
 show
:
 
true
,
 aggregate
:
 
true
 
}
}
    
/>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/HeatmapChart

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap