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
Themeoptional

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