Marimekko

@nivo/marimekko

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
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Diverging: Spectral

Define chart's colors.

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
booleanoptionaldefault:false
   

Enable/disable x grid.

(number | string)[]optional

Specify values to use for vertical grid lines.

booleanoptionaldefault:true
   

Enable/disable y grid.

(number | string)[]optional

Specify values to use for horizontal grid lines.

objectoptional

Top axis configuration.

objectoptional

Right axis configuration.

objectoptional

Bottom axis configuration.

objectoptional

Left axis configuration.

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.