Stream

@nivo/streamstacked
svg

Stream chart.

The responsive alternative of this component is ResponsiveStream.

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

Actions Logs
Start interacting with the chart to log actions
Base
object[]required

Chart data.

string | numberrequired

Keys to use to build each layer.

string | (layer) => string | numberoptionaldefault:'id'

Label accessor, used for legends.

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

Optional formatter for values.

stringoptional
silhouette

Offset type.

stringoptional
none

Layers order.

stringoptionaldefault:'catmullRom'
catmullRom

Curve interpolation.

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"}
Categorical: Nivo

Define chart's colors.

numberoptionaldefault:1

Layers fill opacity.

numberoptionaldefault:0
px

Width of layer border.

string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
theme property
background

Method to compute layer border color.

object[]optional

Define patterns and gradients.

object[]optional

Define rules to apply patterns and gradients

Customization
Array<string | Function>optionaldefault:['grid', 'axes', 'layers', 'dots', 'slices', 'legends']

Defines the order of layers.

Grid & Axes
booleanoptionaldefault:false
   

Enable/disable x grid.

booleanoptionaldefault:true
   

Enable/disable y grid.

objectoptional

Top axis configuration.

objectoptional

Right axis configuration.

objectoptional

Bottom axis configuration.

objectoptional

Left axis configuration.

Dots
booleanoptionaldefault:false
   

Enable/disable dots.

Functionoptional

Custom rendering function for dots.

number | Functionoptionaldefault:6
px

Size of the dots

string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
No modifier.

Method to compute dots color.

number | Functionoptionaldefault:0
px

Width of the dots border.

string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute dots border color.

Interactivity
booleanoptionaldefault:true
   

Enable/disable interactivity.

FunctionComponentoptional

Tooltip custom component.

booleanoptionaldefault:true
   

Enable/disable stack tooltip ('isInteractive' must also be 'true').

FunctionComponentoptional

Stack tooltip custom component.

Motion
booleanoptionaldefault:true
   

Enable/disable transitions.

string | objectoptional
default

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

Accessibility
stringoptional

Main element role attribute.

stringoptional

Main element aria-label.

stringoptional

Main element aria-labelledby.

stringoptional

Main element aria-describedby.

Recipes
Use custom legend label