Creating a Heatmap Chart in React Using CanvasJS StackedColumn100 Chart

Introduction

Heatmaps are an excellent way to visualize data density and distribution. While CanvasJS offers a variety of chart types, you can creatively use the StackedColumn100 chart to achieve a heatmap effect. This article will guide you through the process of creating a heatmap chart in React using CanvasJS.

Prerequisites

Before we start, ensure you have the following:

• Node.js installed
• A React project set up
• CanvasJS React library installed

You can install the CanvasJS React library using npm:

<code>npm </code>install @<code>canvasjs</code>/<code>react-charts</code>

Using the code

1. Set Up Your React Component

First, import the necessary modules and set up your React component:

import CanvasJSReact from "@canvasjs/react-charts";
import { useEffect, useRef } from "react";

2. Customize Data Points

To create a heatmap effect, you need to adjust the data points to reflect the intensity of each
cell. Create an array of arrays such that each of these arrays represent a column of the heatmap, and the first element is the label of that column.

const heatmapData = [
    ["Brendan Chan", 48, 104, 28, 42, 78],
    ["Carla Johnson", 85, 91, 97, 61, 85],
    ["Rodrigo Keller", 31, 3, 75, 30, 31],
    ["Avery Lang", 12, 40, 82, 94, 95],
    ["Maya Ross", 87, 35, 10, 7, 128],
    ["Edward Martin", 38, 7, 6, 112, 92],
    ["Ricky Bell", 71, 124, 124, 14, 17],
    ["Jillian Newton", 36, 17, 116, 65, 51],
    ["Mason Figueroa", 91, 52, 75, 28, 28],
    ["Dean Ortega", 11, 14, 6, 97, 76]
];

3. Styling the Chart

You have to further customize the chart by adjusting the colors such that they reflect the variance in intensity across the cells. You should initially set the visibility of the dataseries to "hidden", so that there is no jump in visuals when you are changing the data and chart styling.

const options = {
    theme: "light2",
    title: {
        text: "Sales per employee per weekday"
    },
    axisX: {
        gridThickness: 0,
        lineThickness: 0,
        tickLength: 0,
        labelAngle: 0,
        labelTextAlign: "center"
    },
    axisY: {
        gridThickness: 0,
        lineThickness: 0,
        tickLength: 0,
        reversed: true,
        labelFormatter: function (e) {
            if (e.value === 10 || e.value / 10 % 2)
                return week[i++ % 5];
            return "";
        }
    },
    data: (heatmapData[0].slice(1)).map((elem, i) => (
        {
            type: "stackedColumn100",
            indexLabelFontColor: "#90A4AE",
            visible: false,
            dataPoints: heatmapData.map(item => ({ label: item[0], ...updateDatapoint(item[i + 1]) })),
        }))
};

4. Change the width of columns

You have to then change the width of the columns such that there are no gap between consecutive columns, and add striplines such that it creates an illusion of a border between adjacent cells. You also have to add an event listener for re-size event and adjust the width to handle it.

useEffect(() => {
        const chart = chartRef.current.chart;

        function addStripLines(chart) {
            let tempYVal = 0;
            let totalYVal = 0;

            for (let i = 0; i < chart.options.data[0].dataPoints.length; i++) {
                chart.axisX[0].addTo("stripLines", { value: chart.options.data[0].dataPoints[i].x + .5, color: "#0D47A1", showOnTop: true, thickness: 2 });
            }

            for (let i = 0; i < chart.options.data[0].dataPoints.length; i++) {
                totalYVal = 0;

                for (let j = 0; j < chart.options.data.length; j++) {
                    totalYVal += chart.options.data[j].dataPoints[i].y;
                }

                tempYVal += (chart.options.data[0].dataPoints[i].y / totalYVal) * 100;
                chart.axisY[0].addTo("stripLines", { value: tempYVal, color: "#0D47A1", showOnTop: true, thickness: 2 });
            }
        }

        function updateChart(chart) {
            chart.set("dataPointWidth", Math.ceil(chart.axisX[0].bounds.width / chart.data[0].dataPoints.length));
            addStripLines(chart);

            for (let i = 0; i < chart.data.length; i++) {
                chart.data[i].set("visible", true);
            }
        }

        function updateChartWidth() {
            chart.set("dataPointWidth", Math.ceil(chart.axisX[0].bounds.width / chart.data[0].dataPoints.length));
        }

        updateChart(chart);

        window.addEventListener('resize', updateChartWidth);
        return () => window.removeEventListener('resize', updateChartWidth);
    }, []);

4. Render the Chart

Finally, render the chart in your React component. You have to use useRef to get a reference to the chart so you can alter the chart width and style post render.

return <CanvasJSChart options={options} ref={chartRef} />;

Points of Interest

A couple things that you should keep in mind while creating the chart, are to only display the chart after the modifications to the styling is done, and to adjust the width of the columns on window resize event.

Check out this StackBlitz for the complete code of this example.