A waffle component. You can fully customize it using 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 the 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.
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.