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.
Actions Logs
Start interacting with the chart to log actions
Base
numberrequired
Max value.
object[]required
Chart data.
numberrequired
Number of rows.
numberrequired
Number of columns.
stringoptionaldefault:'bottom'
bottom
How to fill the waffle.
numberrequired
px
Padding between each cell.
numberrequired
Chart width.
numberrequired
Chart height.
numberoptionaldefault:'Depends on device'
Adjust pixel ratio, useful for HiDPI screens.
supportsvghtmlcanvas
objectoptional
px
px
px
px
Chart margin.
Style
optional
Define style for common elements such as labels, axes…
Functionoptional
default
Override default cell component.
supportsvghtmlcanvas
string | Function | string[]optionaldefault:{"scheme":"nivo"}