react-hour-heatmap

Simple Demo

Number of messages per hour

Mon
Tue
Wed
Thu
Fri
Sat
Sun
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
 
import React from 'react';
import { Heatmap } from 'react-hour-heatmap';


// this is just some example data
const timeSeriesData = [
    {date: new Date("1.1.2021 01:51"), testVal: 25},
    {date: new Date("1.2.2021 14:51"), testVal: 4},
    {date: new Date("1.3.2021 14:51"), testVal: 12},
    {date: new Date("1.3.2021 16:51"), testVal: 52},
    {date: new Date("1.4.2021 16:51"), testVal: 102},
    // ...
  ];


const App = () => {
  return (
      <Heatmap
        data={timeSeriesData}
        valueColumn="testVal"
        dateColumn="date"
      />
  );
}

Code Sandbox