Heatmap component overview
Heatmap is used to display data in a table where each column represents a week. The only required prop is data – an object where keys are dates in YYYY-MM-DD format and values are numbers.
charts/heatmap
16 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Heatmap startDate and endDate props
The startDate and endDate props are optional and are used to define the heatmap range. If not set, the heatmap will display data for the last year.
Heatmap data format
Heatmap data should be an object where keys are dates in YYYY-MM-DD format (for example '2025-02-14') and values are numbers (for example 2).
Heatmap withTooltip and getTooltipLabel props
Set the withTooltip and getTooltipLabel props to display a tooltip when Heatmap cells are hovered. getTooltipLabel is called with date and value and must return a string to display in the tooltip.
Heatmap colors prop
Heatmap colors can be changed with the 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.
Heatmap color scheme dependent colors
To change colors depending on the color scheme, define colors in a .css file and pass them via classNames. When using CSS variables for colors, you can only use 4 colors without passing the colors prop. If you need more colors, pass them manually to the component via the colors prop.
Heatmap domain prop
By default, Heatmap calculates domain based on data values. To specify the domain manually, use the domain prop, which is useful when your data does not cover the whole range of possible values. For example, if subset data has values from 1 to 4 but the actual range is 1 to 10, pass [1, 10] to the domain prop.
Heatmap withMonthLabels and withWeekdayLabels props
Set the withMonthLabels and withWeekdayLabels props to display chart labels on the heatmap.
Heatmap monthLabelsPosition prop
Set monthLabelsPosition='bottom' to display month labels below the heatmap. The default is to display month labels above.
Heatmap weekdayLabels and monthLabels props
The weekdayLabels prop must be an array of 7 strings with weekday names starting from Sunday. The monthLabels prop must be an array of 12 strings with month names starting from January. Use these to customize the label text.
Heatmap getRectProps callback
Use getRectProps to pass props to each rect. It can be used to add an onClick handler or other event handlers to individual rects in the heatmap.
Heatmap firstDayOfWeek prop
The default first day of the week is Monday. You can change it with the firstDayOfWeek prop.
Heatmap withLegend and legendLabels props
Set withLegend to display a color legend below the heatmap. Use legendLabels prop to customize the labels. The default legend labels are ['Less', 'More'].
Heatmap splitMonths prop
Use splitMonths to separate months visually with a spacer column and show only days that belong to the current month in each column. Month labels will be shifted by one column when splitMonths is enabled and months with fewer than 2 weeks are not labeled.
Heatmap with CSS variable colors example
Example showing how to use CSS variables for Heatmap colors: import { Heatmap } from '@mantine/charts'; import { data } from './data'; import classes from './Demo.module.css'; function Demo() { return <Heatmap data={data} startDate='2024-02-16' endDate='2025-02-16' classNames={classes} colors={['var(--heatmap-level-1)', 'var(--heatmap-level-2)', 'var(--heatmap-level-3)', 'var(--heatmap-level-4)', 'var(--heatmap-level-5)', 'var(--heatmap-level-6)']} />; }
Heatmap with custom domain example
Example showing how to use custom domain with Heatmap: import { Heatmap } from '@mantine/charts'; const data = { '2025-02-14': 2, '2025-02-11': 3, '2025-02-06': 4, '2025-02-05': 1 }; function Demo() { return <Heatmap data={data} domain={[1, 10]} />; }