React HeatGrid

React HeatGrid is a versatile and customizable heatmap component for React applications.

ToolTip when hover on each grid.

Installation

You can install React HeatGrid via npm or yarn:

npm i react-heatgrid --save

Usage

To use the Calendar component from the react-heatgrid package, you need to import it and pass the required props. Below is an example of how to use the Calendar component along with an explanation of its props:

import React from 'react';
import { Calendar } from 'react-heatgrid';

const MyCalendar = () => {
  const calendarData = [
   { value: 9, day: '2023-08-23' },
    { value: 20, day: '2023-08-10' },
    { value: 49, day: '2023-07-17' },
    { value: 45, day: '2023-08-21' },
    { value: 7, day: '2023-07-23' },
    { value: 11, day: '2023-08-15' },
    { value: 28, day: '2023-08-26' },
    { value: 11, day: '2023-09-07' },
    { value: 27, day: '2023-09-08' },
    // you can add random day, skip a day and day can be date format like...
    { value: 27, day: new Date('2023-09-09') },
  ];

  const heatmapColors = ["#161b22","#0e4429","#006d32","#26a641","#39d353"];

  return (
    <div>
      <h1>My Calendar Heatmap</h1>
      <Calendar
        months={3}                 {/* Number of months to display */}
        data={calendarData}         {/* Array of data objects */}
        colors={heatmapColors}      {/* Array of heatmap colors */}
        tooltipLabel="activity"     {/* Tooltip label */}
      />
    </div>
  );
};

export default MyCalendar;

Props Guide

Prop	Description	Default Value
months	The number of months to display in the calendar.	3
gridSize	The size of each grid cell in the calendar.	"20px"
gap	The gap between grid cells in the calendar.	"2px"
data	An array of data objects representing each day in the calendar. Each object should have a 'value' (number) and 'day' (string) property.	Required
colors	An array of colors from low intensity to high. e.g ["#161b22","#0e4429","#006d32","#26a641","#39d353"]	Required
fontSize	Size of text throughout the calendar.	"12px"
fontColor	Color of the text	"black"
DisabledToolTip	Disable tooltips for grid cells.	false
DisabledLegend	Disable the legend of chart	false
placement	The placement of tooltips relative to the grid cell ("top" or "bottom").	"top"
tooltipBg	The background color of tooltips.	"#303030"
tooltipTextColor	The text color of tooltips.	"white"
tooltipLabel	The label for the tooltip, which can be one of "activity", "contributions", or a custom string.	"activity"
tooltipStyle	Additional CSS styles to apply to the tooltip. e.g {border:"1px solid red"}	None
dateFormat	Either "yyyy-mm-dd" (e.g 2023-01-31) or "WeekDay, Month Date, Year" (e.g Tue, Jan 31, 2023)	"yyyy-mm-dd"