Bump

@nivo/bumpsvgisomorphic
svg

The Bump chart can be used to show the ranking of several series over time. It is quite similar to line charts, but instead of graphing some measure on the y-axis, it only shows the ranking of each serie at a given time.

If you'd like to show the ranking and also graph the y-axis values, you can also you use the AreaBump component.

The responsive alternative of this component is ResponsiveBump.

Actions Logs
Start interacting with the chart to log actions
Base
object[]required
Chart data.
numberrequired
Chart width.
numberrequired
Chart height.
objectoptional
px
px
px
px
Chart margin.
stringoptionaldefault:'smooth'
Line interpolation.
numberoptionaldefault:0.6
X padding.
numberoptionaldefault:0.5
X outer padding.
numberoptionaldefault:0.5
Y outer padding.
Style
optional
Define style for common elements such as labels, axes…
string | Function | string[]optionaldefault:{"scheme":"nivo"}
spectral
Defines color range.
number | (serie: Serie) => numberoptionaldefault:2
px
Line width.
number | (serie: Serie) => numberoptionaldefault:4
px
Line width for active series.
number | (serie: Serie) => numberoptionaldefault:1
px
Line width for inactive series.
number | (serie: Serie) => numberoptionaldefault:1
Opacity.
number | (serie: Serie) => numberoptionaldefault:1
Opacity for active series.
number | (serie: Serie) => numberoptionaldefault:0.3
Opacity for inactive series.
Labels
false | string | (serie: Serie) => stringoptionaldefault:false
numberoptionaldefault:16
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
No modifier.
Method to compute start label text color.
false | string | (serie: Serie) => stringoptionaldefault:'id'
numberoptionaldefault:16
string | object | Functionoptionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
No modifier.
Method to compute end label text color.
Points
number | Functionoptionaldefault:6
Point size.
number | Functionoptionaldefault:8
Point size for active series.
number | Functionoptionaldefault:4
Point size for inactive series.
string | object | Functionoptionaldefault:{"from":"serie.color"}
inheritthemecustom
theme property
background
Method to compute point fill color.
number | Functionoptionaldefault:0
px
Point border width.
number | Functionoptionaldefault:0
px
Point border width for active series.
number | Functionoptionaldefault:0
px
Point border width for inactive series.
string | object | Functionoptionaldefault:{"from":"serie.color","modifiers":[["darker",1.4]]}
inheritthemecustom
inherited property
serie.color
modifiers
No modifier.
Method to compute point border color.
Grid & Axes
booleanoptionaldefault:true
   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.
Interactivity
booleanoptionaldefault:true
   Enable/disable interactivity.
(serie, event) => voidoptional
onMouseEnter handler.
(serie, event) => voidoptional
onMouseMove handler.
(serie, event) => voidoptional
onMouseLeave handler.
(serie, event) => voidoptional
onClick handler.
Functionoptional
Custom tooltip component.
Motion
booleanoptionaldefault:true
   Enable/disable transitions.
string | objectoptionaldefault:'gentle'
gentle
Motion config for react-spring, either a preset or a custom configuration.
Recipes
Custom pointsMissing data