Marimekko

@nivo/marimekkosvgisomorphic
svg

The Marimekko component is somewhat similar to a bar chart, but it allows you to use an extra dimension to compute the thickness of each bar.

It also shares some behavior of the Stream chart regarding the way we can configure the offset.

The responsive alternative of this component is ResponsiveMarimekko.

You can also see more example usages in the storybook.

See the dedicated guide on how to setup legends for this component.

Actions Logs
Start interacting with the chart to log actions
Base
RawDatum[]required
Chart data, which should be immutable.
string | (datum: RawDatum): string | numberrequired
ID accessor.
string | (datum: RawDatum): numberrequired
Value accessor.
{ id: string, value: string | (datum: RawDatum) => number }required
Data dimensions configuration.
string | (value: number) => string | numberoptional
open editor
Optional formatter for values.
stringoptionaldefault:'vertical'
How to display bars.
OffsetIdoptionaldefault:'none'
none
Offset type.
numberoptionaldefault:0
px
Space before the first bar and after the last one.
numberoptionaldefault:3
px
Space between bars.
numberrequired
Chart width.
numberrequired
Chart height.
objectoptional
px
px
px
px
Chart margin.
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
spectral
Defines color range.
object[]optional
Define patterns and gradients.
object[]optional
Define rules to apply patterns and gradients
booleanoptional
   Patterns.
numberoptionaldefault:0
px
Slices border width.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute border color.
Grid & Axes
objectoptional
Top axis configuration.
objectoptional
Right axis configuration.
objectoptional
Bottom axis configuration.
objectoptional
Left axis configuration.
booleanoptionaldefault:false
   Enable/disable x grid.
number[]optional
Specify values to use for vertical grid lines.
booleanoptionaldefault:true
   Enable/disable y grid.
number[]optional
Specify values to use for horizontal grid lines.
Customization
Array<string | Function>optionaldefault:['grid', 'axes', 'bars', 'legends']
Defines the order of layers and add custom layers.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
(bar: BarDatum<RawDatum>, event: MouseEvent) => voidoptional
onClick handler, it receives target bar data and mouse event.
(bar: BarDatum<RawDatum>, event: MouseEvent) => voidoptional
onMouseEnter handler, it receives target bar data and mouse event.
(bar: BarDatum<RawDatum>, event: MouseEvent) => voidoptional
onMouseMove handler, it receives target bar data and mouse event.
(bar: BarDatum<RawDatum>, event: MouseEvent) => voidoptional
onMouseLeave handler, it receives target bar data and mouse event.
Componentoptional
Custom tooltip component
booleanoptional
   Showcase custom tooltip.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
string | objectoptionaldefault:'gentle'
gentle
Motion config for react-spring, either a preset or a custom configuration.
Legends
Legend[]optional
Optional chart's legends.
add legend
legend[0]: bottom, rowremove
stringoptional
bottom
Defines legend anchor relative to chart's viewport.
'column' | 'row'optional
Legend direction, must be one of 'column', 'row'.
booleanoptional
   Justify symbol and label.
numberoptional
px
Legend block x translation.
numberoptional
px
Legend block y translation.
numberrequired
px
Legend item width.
numberrequired
px
Legend item height.
numberoptional
px
Spacing between each item.
numberoptional
px
Item symbol size.
stringoptional
right-to-left
Item layout direction.
Recipes
using arrays for datadiverging chartcustom layers