Custom Colors

Use to colors prop to insert your own color to be used to scale the data. Provide as many colors as you'd like. here we set colors={['#fff','#feb24c','#f03b20']}

Code Demo

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 "./styles.css";

import React from "react";
import { Heatmap } from "react-hour-heatmap";

export default function App() {
  return (
    <div className="App">
      <Heatmap
        data={[
          { 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 }
        ]}
        valueColumn="testVal"
        dateColumn="date"
        colors={['#fff','#feb24c','#f03b20']}
      />
    </div>
  );
}

Code sandbox