WaffleHtml

@nivo/wafflehtmlisomorphic
svghtmlcanvas

A variation around the Waffle component, using HTML elements.

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 HTML component for available properties.

You can also see more example usages in storybook.

The responsive alternative of this component is ResponsiveWaffleHtml, it also offers other implementations, see Waffle 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.

numberoptionaldefault:0
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
default

Override default cell component.

supportsvghtmlcanvas
OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Set 2

Define chart's colors.

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

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.

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

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
Recipes
Implementing a custom tooltip