react-github-heatmap

A plugable React component to display a general purpose GitHub-like contributions graph

Installation

yarn add react-github-heatmap
npm i react-github-heatmap

Then in your code:

import React from 'react';
import { Heatmap, HeatmapData } from 'react-github-heatmap';
import { api } from './api';

const App = () => {
  const [data, setData] = React.useState<HeatmapData>();
  const [isLoading, setIsLoading] = useState(false);
  React.useEffect(() => {
    fetchData();
  }, [])

  const fetchData = async () => {
    setIsLoading(true);
    await api.getData().then(data => {
      setData(data);
    }).catch(error => { 
      alert(error.message)
    }).finally(() => setIsLoading(false))
  }

  return (
    <>
      {isLoading && <span>Loading...</span>}
      {data && <Heatmap data={data} />}
    </>
    )
}

Component properties

PropertyTypeDefaultDescription
dataHeatmapData-The heatmap data (required)
blockMarginnumber2Margin between blocks
blockSizenumber12Size of one block (one day)
colorstring|ColorundefinedBase color to compute graph intensity colors (see below)
dateFormatstring'MMM d, yyyy'A date-fns/format compatible date string
fontSizenumber14Base font size for text in chart.
fullYearbooleantrueWhether to show the whole last year starting now or this year only (starting in January).
themeThemeGitHub themeA object specifying all theme colors explicitly (see below)
tooltipsbooleantrueWhether to add data-tip attributes to the blocks. Add react-tooltip and use it as child of this component. See below example.
yearsnumber[][2025]List of to be rendered years. Defaults to the current year. If no data is available the chart for this year will be ommited.

Examples

  1. Show contributions of last year
  2. Display this year only
  3. Show several years
  4. Set the color theme
  5. Add tooltips
  6. Different block size
  7. Different block margin
  8. Chart font size

Show contributions of last year

By default the last whole year is shown.

<Heatmap data={data} />

Display this year only

You might prefer the calendar for the current year to start in January (instead of showing the last twelve months).

<Heatmap data={data} fullYear={false} />

Show several years

To display multiple years, pass an array into the component:

<Heatmap data={data} years={[2018, 2017]} fullYear={false}/>

Set the color theme

Either set a base color (any valid CSS color) to calculate the color hues for the contribution intensity automatically or specify the different theme colors explicitly. If a color is set, the theme will be ignored. If neither color or theme is set, the standard GitHub colors will be used (as in these examples).

<Heatmap data={data} color="hsl(203, 82%, 33%)" />

Set the colors explicitly like this:

const defaultTheme = {
  background: 'transparent',
  text: '#000',
  grade4: '#196127',
  grade3: '#239a3b',
  grade2: '#7bc96f',
  grade1: '#c6e48b',
  grade0: '#ebedf0',
};

<Heatmap data={data} theme={defaultTheme} />

Add tooltips

In order to show tooltips on hover, you need to add another dependency react-tooltip. Add this component then as child of the calendar. Make sure to enable the `html` property in the ReactTooltip component to display the message correctly.

<div>
    <Heatmap data={data}>
      <ReactTooltip delayShow={100} html />
    </Heatmap>
  </div>

Different block size

The block size (12 per default) is configurable:

<Heatmap data={data} blockSize={10} />

Different block margin (and size)

Analogously the block margin can be adjusted.

<Heatmap data={data} blockSize={10} blockMargin={4} />

Chart font size

Finally, there is a property to set the fontsize of the text inside the chart. This comes in handy, if a large block size or margin is set. The default base font size is 14px.

<Heatmap data={data} fontSize={14} blockSize={12} />