react-simple-heatmap

A simple React component to create responsive heatmap. To be rendered, this heatmap only need a dataset (2D Array) and a parent element which have a width and height. There is more customization available.

Install

yarn add react-simple-heatmap

or

npm install react-simple-heatmap

Demo

Here is a preview.

Obligatory Fields

Name	Type	description	example	default
data	2D Array of numbers	2D Matrix of numbres	[[10,12,33], [2,45,31], [16, 32, 29]]	undefined

Basic Example:

import React, { Component } from "react"
import Heatmap from "react-simple-heatmap"
 
export default class App extends Component {
 
  render() {
    // 2D array of numbers
    const data = [[10, 12, 33],
                  [21, 45, 31],
                  [16, 32, 29]];
    return (
      <div
        style={{ height: "500px", width: "500px" }}>
        <Heatmap
          data={ data }
        />
      </div>
    );
  }
}

Customization fields

Name	Type	description	example	default
bgColors	Array of 2 colors	Main color using RGB format	["rgb(255, 11, 11)", "rgb(255, 255, 0)"]	["rgb(24, 144, 255)", "rgb(255, 255, 255)"]
xLabels	Array	Display the X-axis labels	["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]	undefined
yLabels	Array	Display the Y-axis labels	[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]	undefined
showLegend	Bollean	Display the heatmap legend.	true	false
onClick	Function	Adding an handler to cell click	(data, x, y) => alert(`Data: ${ data }, X: ${ x }, Y: ${ y }\`) | undefined
showData	Bollean	Display data inside each cells.	true	false
bordered	Bollean	Display a border on the heatmap.	false	true
xStepLabel	Number	Show the label if his index in the xLabels array modulo xStepLabel equals 0	2	undefined
yStepLabel	Number	Show the label if his index in the yLabels array modulo yStepLabel equals 0	2	undefined
showTicks	Boolean or String	Show the ticks lines of the label. Use true to show X-axis and Y-axis ticks, "y" to show only Y-axis ticks and "x" to show only X-axis ticks.	"y"	false
xLabelsStyle	Object	Style your X-axis labels.	{ fontWeight: "bold" }	{}
yLabelsStyle	Object	Style your Y-axis labels.	{ fontWeight: "bold" }	{}
legendStyle	Object	Style your Legeng labels.	{ fontWeight: "bold" }	{}
borderRadius	String	Add border radius to the heatmap and legend	"4px"	0

Customization example

import React, { Component } from 'react'
import Heatmap from 'react-simple-heatmap'
 
// Creating a 2D array (7 x 24)
const size = 7;
const data = [];
for(let i = 0; i < size; i++){
    const temp = [];
    for(let i = 0; i < 24; i++){
        temp.push(Math.round(Math.random() * 100));
    }
    data.push(temp);
}
 
export default class App extends Component {
 
  render() {
        // Create an array of for the Y labels
        const yLabels = [];
        for(let i = 0; i < 24; i++){
            yLabels.push(i+1 + " h");
        }
 
    return (
      <div className="App">
                <div
                    style={{ height: "500px", width: "800px", margin: "4rem auto" }}
                >
                    {
                        data.length > 0 && (
                            <Heatmap
                              data={ data }
                                bgColors={ ["rgb(255, 11, 11)", "rgb(255, 255, 0)"] }
                                xLabels={ ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] }
                                yLabels={ yLabels }
                                showLegend={ true }
                                xStepLabel={ 2 }
                                yStepLabel={ 2 }
                                showTicks={ "x" }
                                xLabelsStyle={{ fontWeight: "bold", fontSize: "11px" }}
                                yLabelsStyle={{ fontWeight: "bold" }}
                                legendStyle={{ fontWeight: "bold" }}
                                bordered={ false }
                                borderRadius={ "4px" }
                                onClick={ (data, x, y) => alert(`Data: ${ data }, X: ${ x }, Y: ${ y }`) }
                            />
                        )
                    }
                </div>
      </div>
    );
  }
}
 

License

MIT © Julien Rioux