Waffle

@nivo/waffle
svghtmlcanvas

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

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
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Nivo

Define chart's colors.

stringoptionaldefault:'#cccccc'
   #cccccc

Defines empty cells color.

numberoptionaldefault:1

Empty cells opacity.

numberoptionaldefault:0
px

Cells border radius.

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
Customization
('nodes' | CustomSvgLayer | CustomHtmlLayer | CustomCanvasLayer)[]optionaldefault:['cells', 'areas', 'legends']

Define layers, please use the appropriate variant for custom layers.

supportsvghtmlcanvas
CellComponent<D extends Datum>optional

Override default cell component.

supportsvghtmlcanvas
Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

(datum: ComputedDatum, event: MouseEvent) => voidoptional
supportsvghtmlcanvas
(datum: ComputedDatum, event: MouseEvent) => voidoptional
(datum: ComputedDatum, event: MouseEvent) => voidoptional
supportsvghtmlcanvas
(datum: ComputedDatum, event: MouseEvent) => voidoptional
TooltipComponentoptional

Custom tooltip component

Legends
(data: LegendDatum<D>[]) => voidoptional

Can be used to get the computed legend data.

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.

string | objectoptionaldefault:'gentle'
gentle

Motion config for react-spring, either a preset or a custom configuration.

numberoptionaldefault:0

Staggered animation for the cells if > 0.

supportsvghtmlcanvas
Accessibility
stringoptional

Main element role attribute.

stringoptional

Main element aria-label.

stringoptional

Main element aria-labelledby.

stringoptional

Main element aria-describedby.

Recipes
Implementing a custom cellImplementing a custom legendImplementing a custom tooltipToggle series using hiddenIds