react-simple-heatmap
A simple React component to create responsive heatmap. The heatmap take the height and width of it's parent element.
Install
npm install react-simple-heatmap
or
yarn add react-simple-heatmap
Demo
Here is a simple preview.
Properties
Name | Type | description | example | default | isRequired |
---|
data | 2D Array of numbers | 2D Matrix of numbres | [[10,12,33], [2,45,31], [16, 32, 29]] | undefined | true |
bgColor | String | Main color using RGB format | "rgb(255, 17, 17)" | "rgb(24, 144, 255)" | false |
showData | Bollean | Display data inside each cells. | true | false | false |
showLegend | Bollean | Display the heatmap legend. | true | false | false |
onClick | Function | Adding an handler to cell click | (data) => console.log(data) | undefined | false |
bordered | Bollean | Display a border on the heatmap. | false | true | false |
Usage
import React, { Component } from "react"
import Heatmap from "react-simple-heatmap"
export default class App extends Component {
render() {
return (
<div
style={{ height: "500px", width: "500px" }}>
<Heatmap
data={ data } // 2D array of numbers
/>
</div>
);
}
}
Example
import React, { Component } from 'react'
import Heatmap from 'react-simple-heatmap'
import './App.css';
const size = 10;
const data = [];
for(let i = 0; i < size; i++){
const temp = [];
for(let i = 0; i < size; i++){
temp.push(Math.round(Math.random() * 100) / 100);
}
data.push(temp);
}
export default class App extends Component {
render() {
return (
<div style={{ marginTop: "4rem" }}>
<div style={{ height: "500px", width: "500px" }}>
<Heatmap
showData={ true }
showLegend={ true }
bgColor={ "rgb(255, 17, 17)" }
data={ data }
onClick={ (data) => console.log(data) }
/>
</div>
</div>
);
}
}
Screenshot
License
MIT © JulienRioux