WaffleCanvas

@nivo/wafflecanvas

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 the storybook.

The responsive alternative of this component is ResponsiveWaffleCanvas, it also offers other implementations, see Waffle and WaffleHtml.

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
Override default cell component.
supportsvghtmlcanvas
string | Function | string[]optionaldefault:{"scheme":"nivo"}
category10
Defines how to compute node color.
stringoptionaldefault:'#cccccc'
   #cccccc
Defines empty cells color.
numberoptionaldefault:1
Empty cells opacity.
numberoptionaldefault:0
px
Control cell border width.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute cell border color.
object[]optional
Define patterns and gradients.
supportsvghtmlcanvas
object[]optional
Define rules to apply patterns and gradients
supportsvghtmlcanvas
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
Functionoptional
onClick handler, it receives clicked node data and style plus mouse event.
Functionoptional
Custom tooltip component
booleanoptional
   Showcase custom tooltip.
Legends
object[]optional
Optional chart's legends.
add legend
legends[0]remove
stringoptional
top-left
Defines legend anchor relative to chart's viewport.
supportsvghtmlcanvas
'column' | 'row'optional
Legend direction, must be one of 'column', 'row'.
supportsvghtmlcanvas
booleanoptional
   Justify symbol and label.
supportsvghtmlcanvas
numberoptional
px
Legend block x translation.
supportsvghtmlcanvas
numberoptional
px
Legend block y translation.
supportsvghtmlcanvas
numberrequired
px
Legend item width.
supportsvghtmlcanvas
numberrequired
px
Legend item height.
supportsvghtmlcanvas
numberoptional
px
Spacing between each item.
supportsvghtmlcanvas
numberoptional
px
Item symbol size.
supportsvghtmlcanvas
stringoptional
left-to-right
Item layout direction.
supportsvghtmlcanvas
Motion
booleanoptionaldefault:true
Enable/disable transitions.
supportsvghtmlcanvas
numberoptionaldefault:90
Motion stiffness.
supportsvghtmlcanvas
numberoptionaldefault:15
Motion damping.
supportsvghtmlcanvas