Usage
Heatmap
is used to display data in a table where each column represents a week.
The only required prop is data
– object where keys are dates in YYYY-MM-DD
format and values are numbers.
startDate
and endDate
props are optional, they are used to define heatmap range.
If not set, heatmap will display data for the last year.
Data format
Heatmap
expects data in the following format:
With tooltip
Set withTooltip
and getTooltipLabel
props to display tooltip when
Heatmap
cells are hovered. getTooltipLabel
is called with date and value
and must return string to display in tooltip.
Change colors
Heatmap
colors can be changed with colors
prop. It should be an array of any
valid CSS color values (hex, rgba, CSS variables, etc.). By default, Heatmap
uses 4 colors to indicate heat level, but you can pass any number of colors.
Colors depending on color scheme
If you want to change colors depending on the color scheme,
you should define those colors in .css
file:
Note that in this case, you can only use 4 colors without passing colors
prop.
If you need more colors, you should pass them manually to the component:
Values domain
By default, Heatmap
calculates domain based on data values, for example, for
the following data, the domain will be [1, 4]
:
Based on the domain, Heatmap
calculates colors for each rect: 1 – min heat level,
4 – max heat level. To specify domain manually, use domain
prop. It is useful
when your data does not cover the whole range of possible values. For example,
the subset of data passed to the heatmap has values from 1 to 4, but the actual
range is from 1 to 10. In this case, you can pass [1, 10]
to domain
prop:
Weekdays and months labels
Set withMonthLabels
and withWeekdayLabels
props to display chart labels:
Change labels text
To change labels, use weekdayLabels
and monthLabels
props.
weekdayLabels
prop must be an array of 7 strings with weekday names starting from Sunday.
monthLabels
prop must be an array of 12 strings with month names starting from January.
Rect size, gap and radius
Pass props to rect
Use getRectProps
to pass props to each rect. For example,
it can be used to add onClick handler to each rect:
Hide outside dates
First day of week
The default first day of the week is Monday, you can change it with firstDayOfWeek
prop: