react-day-hour-heatmap v0.1.7

React Day-Hour Heatmap

A heatmap chart component for day-hour-data visualization
Check👉 Live demo

installation

install with yarn:

yarn add react-day-hour-heatmap

install with npm:

npm -i react-day-hour-heatmap

Usage

First, import the component and default stylesheet. (Note: if you do not import stylesheet, you can see the hell)

import ReactDayHourHeatmap from 'react-day-hour-heatmap';
import 'react-day-hour-heatmap/dist/style.css';

then, you can use this heatmap component in your project. if data is ready.

const data = [
    {date: string , time: number, count: number },
    {...}, ...
]

ReactDOM.render(<ReactDayHourHeatmap data={data} />, document.getElementById('root'));

Props

...will be updated soon

Custom styles

if you want to customize component styles, just import custom stylesheet or override the defualt styles.

you can change the styles by changing this classes, and you can also override this classes.

left-label, top-label, cell, row, cell .label-date, cell .tooltiptext.

like this:

.react-day-hour-heatmap { ... }
.react-day-hour-heatmap-left-label { ... }
.react-day-hour-heatmap-top-label { ... }
.react-day-hour-heatmap-cell { ... }
.react-day-hour-heatmap-row { ... }
.react-day-hour-heatmap-cell .label-date { ... }
.react-day-hour-heatmap-cell .tooltiptext { ... }