A variation around the Waffle component. Well suited for large data sets as it does not impact DOM tree depth, however you'll lose the isomorphic ability and transitions.
You can also see more example usages in the storybook.
The responsive alternative of this component is
ResponsiveWaffleCanvas, it also offers other implementations,
see Waffle and WaffleHtml.
Max value.
Chart data.
Number of rows.
Number of columns.
'bottom'How to fill the waffle.
Padding between each cell.
Chart width.
Chart height.
'Depends on device'Adjust pixel ratio, useful for HiDPI screens.
Chart margin.
Define style for common elements such as labels, axes…
Override default cell component.
Define chart's colors.
'#cccccc'#ccccccDefines empty cells color.
1Empty cells opacity.
0Control cell border width.
Method to compute cell border color.
Define patterns and gradients.
Define rules to apply patterns and gradients
trueEnable/disable interactivity.
onClick handler, it receives clicked node data and style plus mouse event.
Custom tooltip component
Showcase custom tooltip.
Optional chart's legends.
Defines legend anchor relative to chart's viewport.
Legend direction, must be one of 'column', 'row'.
Justify symbol and label.
Legend block x translation.
Legend block y translation.
Legend item width.
Legend item height.
Spacing between each item.
Item symbol size.
Item layout direction.
trueEnable/disable transitions.
90Motion stiffness.
15Motion damping.