Bump

@nivo/bump

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
BumpSerie<Datum, ExtraProps>[]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…

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

Define chart's colors.

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
boolean | (serie: BumpSerie) => stringoptionaldefault:false
   

Start label, use a boolean to enable/disable, or a function to customize its text.

numberoptionaldefault:16

Start label padding.

InheritedColorConfig<BumpComputedSerie>optionaldefault:{"from":"color"}
inheritthemecustom
inherited property
color
modifiers
No modifier.

Method to compute start label text color, or a function to customize its text.

boolean | (serie: BumpSerie) => stringoptionaldefault:true
   

End label, use a boolean to enable/disable, or a function to customize its text.

numberoptionaldefault:16

End label padding.

InheritedColorConfig<BumpComputedSerie>optionaldefault:{"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: BumpComputedSerie, event: MouseEvent) => voidoptional

onMouseEnter handler.

(serie: BumpComputedSerie, event: MouseEvent) => voidoptional

onMouseMove handler.

(serie: BumpComputedSerie, event: MouseEvent) => voidoptional

onMouseLeave handler.

(serie: BumpComputedSerie, event: MouseEvent) => 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.