Custom Popup

Use to popup prop to insert your functional component and render a custom popup.

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 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"), count: 25 },
          {date: new Date("1.2.2021 14:51"), count: 4 },
          {date: new Date("1.3.2021 14:51"), count: 12 },
          {date: new Date("1.3.2021 16:51"), count: 12 },
          {date: new Date("1.3.2021 16:23"), count: 22 },
          {date: new Date("1.4.2021 16:51"), count: 102 }
        ]}
        valueColumn="count"
        dateColumn="date"
        popup={
          (heatmap) => (
            <Card>
              <CardHeader title="My Custom Popup" />
              <CardContent>
                Sum: {heatmap.data.value}
                <Divider />
                Total # of Records Binned: {heatmap.data.minutes.filter(r => r.data.date).length}
              </CardContent>
            </Card>
          )
        }
/>
    </div>
  );
}