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
Property | Type | Default | Description |
---|---|---|---|
data | HeatmapData | - | The heatmap data (required) |
blockMargin | number | 2 | Margin between blocks |
blockSize | number | 12 | Size of one block (one day) |
color | string|Color | undefined | Base color to compute graph intensity colors (see below) |
dateFormat | string | 'MMM d, yyyy' | A date-fns/format compatible date string |
fontSize | number | 14 | Base font size for text in chart. |
fullYear | boolean | true | Whether to show the whole last year starting now or this year only (starting in January). |
theme | Theme | GitHub theme | A object specifying all theme colors explicitly (see below) |
tooltips | boolean | true | Whether to add data-tip attributes to the blocks. Add react-tooltip and use it as child of this component. See below example. |
years | number[] | [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
- Show contributions of last year
- Display this year only
- Show several years
- Set the color theme
- Add tooltips
- Different block size
- Different block margin
- 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} />