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 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.
0Padding 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.
Custom tooltip component
Can be used to get the computed legend data.
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.
'gentle'Motion config for react-spring, either a preset or a custom configuration.
0Staggered animation for the cells if > 0.