A variation around the Calendar component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic rendering ability.
The responsive alternative of this component is ResponsiveCalendarCanvas.
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'#aa7942color 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'color 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.