Introduction
HightCharts is a powerful library for creating data visualizations, It comes with many tools that allow to creation of a reliable and secure chart.
This article will demonstrate how we can implement a heat map using Highcharts in React.
Full source code:
Pre-requests:
We need to install the following npm packages related to hightcharts and highcharts-react-official:
Let’s install them:
Yarn
yarn add highcharts-react-official highcharts
NPM
npm install highcharts-react-official highcharts
React Heatmap chart example
In this example, we’re going to implement a week/day (24 hours) heatmap.
Let’s start by creating a HeatMap.js
React component and add our implementation into it.
First, we need to import the required Highcharts utils:
import Highcharts from "highcharts";
import HighchartsHeatmap from "highcharts/modules/heatmap";
import HighchartsReact from "highcharts-react-official";
Next, we need to inject HighchartsHeatmap
the module into Highcharts
wrapper.
HighchartsHeatmap(Highcharts);
Now we can use the React component in our implementation as the following:
<HighchartsReact />
but would result in the following warnings:
- The “highcharts” property was not passed.
- The “options” property was not passed.

Adding the highcharts property would result in the following:
<HighchartsReact highcharts={Highcharts} />
Now, let’s dig into the options property and understand the details of it.
Heatmap Options
Let’s create an object and add the following properties into it:
// 1- Create Y-axis labels
const WEEK_DAYS = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
];
const options = {
chart: {
// 2- Set the chart type
type: 'heatmap',
plotBorderWidth: 1,
},
title: {
text: 'Revenue per hour per weekday heatmap',
},
xAxis: {
// 3- Set X-axis value, we need 24h
min: 0,
max: 23,
// 4- Set the tickInterval to 1, to show all 24h on X-axis
tickInterval: 1,
labels: {
step: 1,
style: {
fontSize: '14px',
fontFamily: 'Open Sans',
},
},
gridLineWidth: 0,
lineWidth: 0.5,
lineColor: 'rgba(0,0,0,0.75)',
tickWidth: 0.5,
tickLength: 3,
tickColor: 'rgba(0,0,0,0.75)',
title: {
text: 'Hour',
},
},
yAxis: {
// 5- Set the categories of Y-axis to WEEK_DAYS
categories: WEEK_DAYS,
title: 'Weekdays',
labels: {
style: {
fontSize: '14px',
fontFamily: 'Open Sans',
},
},
},
tooltip: {
// 6- Show formatted text on hovering over each value in the heatmap
formatter: function() {
return (
'<b>Hour Is: </b>' +
this.point.x +
'<br /><b>Day Is:</b> ' +
this.point.y +
'<br />' +
'<b>Revenue Is:</b> $' +
this.point.value
);
},
},
// 7- Add colors range to the heatmap values
colorAxis: {
stops: [
[0, 'rgba(56, 7, 84, 0.4)'],
[0.5, 'rgba(56, 7, 84, 0.65)'],
[1, 'rgba(69, 9, 104, 1)'],
],
},
series: [{
name: 'Revenue',
borderWidth: 0.5,
borderColor: 'white',
dataLabels: {
enabled: true,
color: '#000000',
},
// 8- Set the values on the heatmap as array [hour, day, value]
data: [
[1, 2, 100],
[4, 3, 200],
[7, 4, 300],
[2, 5, 400],
[5, 6, 500],
[12, 1, 600],
[10, 0, 700],
],
}, ],
};
Clarifying some properties of the options beside the styles properties:
- Create Y-axis labels
WEEK_DAYS
. - Set the chart type to
heatmap
. - Set X-axis values range, we need 24h.
- Set the
tickInterval
to 1, to show all 24h on the X-axis (in case we need to show less hours, we can increase this value to a value less than 23). - Set the categories of Y-axis to
WEEK_DAYS
. - Show formatted text on hovering over each value in the heatmap.
- Add colors range to the heatmap values, the color will be darker for larger values.
- The data options of the heatmap, accepts an array of arrays, each array can hold 3 values (you can add more), and each value can be defined as the following: [hour, day, value].
Now putting all the code together:
import React from 'react';
import Highcharts from 'highcharts';
import HighchartsHeatmap from 'highcharts/modules/heatmap';
import HighchartsReact from 'highcharts-react-official';
HighchartsHeatmap(Highcharts);
const WEEK_DAYS = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
];
const options = {
chart: {
type: 'heatmap',
plotBorderWidth: 1,
},
title: {
text: 'Revenue per hour per weekday heatmap',
},
xAxis: {
min: 0,
max: 23,
tickInterval: 1,
labels: {
step: 1,
style: {
fontSize: '14px',
fontFamily: 'Open Sans',
},
},
gridLineWidth: 0,
lineWidth: 0.5,
lineColor: 'rgba(0,0,0,0.75)',
tickWidth: 0.5,
tickLength: 3,
tickColor: 'rgba(0,0,0,0.75)',
title: {
text: 'Hour',
},
},
yAxis: {
categories: WEEK_DAYS,
title: 'Weekdays',
labels: {
style: {
fontSize: '14px',
fontFamily: 'Open Sans',
},
},
},
tooltip: {
formatter: function() {
return (
'<b>Hour Is: </b>' +
this.point.x +
'<br /><b>Day Is:</b> ' +
this.point.y +
'<br />' +
'<b>Revenue Is:</b> $' +
this.point.value
);
},
},
colorAxis: {
stops: [
[0, 'rgba(56, 7, 84, 0.4)'],
[0.5, 'rgba(56, 7, 84, 0.65)'],
[1, 'rgba(69, 9, 104, 1)'],
],
},
series: [{
name: 'Revenue',
borderWidth: 0.5,
borderColor: 'white',
dataLabels: {
enabled: true,
color: '#000000',
},
data: [
[1, 2, 100],
[4, 3, 200],
[7, 4, 300],
[2, 5, 400],
[5, 6, 500],
[12, 1, 600],
[10, 0, 700],
],
}, ],
};
export default function HeatMap() {
return ( <
div >
<
h1 > Heat Map < /h1> <
HighchartsReact highcharts = {
Highcharts
}
options = {
options
}
/> <
/div>
);
}
And by running the above code into the browser, we will get the following:

That’s it for how to implement Heatmaps using HightCharts in React.
Photo from Unsplash.