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

string | (value: number) => string | numberoptional
open editor

Optional formatter for values.

numberrequired

Number of rows.

numberrequired

Number of columns.

stringoptionaldefault:'top'
↑ top

How to fill the grid, it's also going to affect the transitions if motionStagger > 0.

numberoptionaldefault:0
px

Padding between each cell.

Datum['id'][]optionaldefault:[]

Hide parts of the data by id

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
Customization
Interactivity
Legends
Motion
Accessibility