Stream

@nivo/streamstackedsvgisomorphic
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
stringoptional
silhouette
Offset type.
stringoptional
none
Layers order.
stringoptionaldefault:'catmullRom'
catmullRom
Curve interpolation.
{number}required
Chart width.
{number}required
Chart height.
objectoptional
px
px
px
px
Chart margin.
Style
optional
Define style for common elements such as labels, axes…
string | Functionoptionaldefault:{"scheme":"nivo"}
nivo
Defines how to compute line color.
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
Grid & Axes
booleanoptionaldefault:true
   Enable/disable x grid.
booleanoptionaldefault:false
   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.
booleanoptionaldefault:true
   Enable/disable stack tooltip ('isInteractive' must also be 'true').
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
string | objectoptionaldefault:'gentle'
gentle
Motion config for react-spring, either a preset or a custom configuration.