This component is heavily inspired by this demo.
The responsive alternative of this component is ResponsiveCalendar,
it also offers a canvas implementations, see
CalendarCanvas.
See the dedicated guide on how to setup legends for this component.
Chart data.
start date
end date
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
'horizontal'defines calendar layout direction.
'center'defines how calendar should be aligned inside chart container.
0Minimum value.
'auto'Maximum value.
Define style for common elements such as labels, axes…
'#61cdbb', '#97e3d5', '#e8c1a0', '#f47560']Cell colors.
'#fff'#eeeeeecolor to use to fill days without available value.
30define spacing between each year row/column depending on the direction.
can be used to customize years label, returns 'YYYY' by default.
'before'defines year legends position.
10define offset from year edge to its label.
0define spacing between each month row/column depending on the direction.
2width of month borders.
'#000'#ffffffcolor to use for months border.
can be used to customize months label, returns abbreviated month name (english) by default. This can be used to use a different language
'before'defines month legends position.
10define offset from month edge to its label.
0define spacing between each day cell.
1width of days border.
'#000'#ffffffcolor to use for days border.
falseenable/disable label on day cells.
'#000000'#000000Optional formatter for values.
Pass inline styles directly to the label.
trueEnable/disable interactivity.
onClick handler, it receives clicked day data and mouse event.
Custom tooltip component.
Showcase custom tooltip.