Bump

@nivo/bumpsvgisomorphic

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
Themeoptional

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.