TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

React HeatGrid

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

HeatGrid Demo

ToolTip when hover on each grid.

HeatGrid Demo


You can install React HeatGrid via npm or yarn:

npm i react-heatgrid --save


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 (
      <h1>My Calendar Heatmap</h1>
        months={3}                 {/* Number of months to display */}
        data={calendarData}         {/* Array of data objects */}
        colors={heatmapColors}      {/* Array of heatmap colors */}
        tooltipLabel="activity"     {/* Tooltip label */}

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"

Package Sidebar


npm i react-heatgrid

Weekly Downloads






Unpacked Size

22.9 kB

Total Files


Last publish


  • armankazi