Build React Heatmap Chart using Highcharts

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:

  1. The “highcharts” property was not passed.
  2. The “options” property was not passed.
Build React Heatmap Chart using Highcharts
Build React Heatmap Chart using Highcharts

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:
  1. Create Y-axis labels WEEK_DAYS.
  2. Set the chart type to heatmap.
  3. Set X-axis values range, we need 24h.
  4. 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).
  5. Set the categories of Y-axis to WEEK_DAYS.
  6. Show formatted text on hovering over each value in the heatmap.
  7. Add colors range to the heatmap values, the color will be darker for larger values.
  8. 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:

Build React Heatmap Chart using Highcharts
Build React Heatmap Chart using Highcharts

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

Photo from Unsplash.

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: