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.
Optional formatter for values.
Number of rows.
Number of columns.
'top'How to fill the grid, it's also going to affect the transitions if motionStagger > 0.
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…
Define chart's colors.
'#cccccc'#ccccccDefines empty cells color.
1Empty cells opacity.
0Cells border radius.
0Control cell border width.
Method to compute cell border color.
Define patterns and gradients.
Define rules to apply patterns and gradients
'cells', 'areas', 'legends']Define layers, please use the appropriate variant for custom layers.
Override default cell component.
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.
Main element role attribute.
Main element aria-label.
Main element aria-labelledby.
Main element aria-describedby.