A waffle component. You can fully customize it using the cellComponent
property to define your own cell component, if you wish to do so
you should have a look at
native SVG component
for available properties.
You can also see more example usages in storybook.
The responsive alternative of this component is ResponsiveWaffle,
it also offers other implementations, see
WaffleHtml and
WaffleCanvas.
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.