AreaBump

@nivo/bumpsvgisomorphic

The AreaBump chart is similar to the Bump chart, but instead of only showing the ranking over time, it also shows the values on the y-axis.

If you're only interested in ranking, you can also you use the Bump component.

The responsive alternative of this component is ResponsiveAreaBump.

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:'middle'
middle
Chart alignment.
stringoptionaldefault:'smooth'
Area interpolation.
numberoptionaldefault:0
numberoptionaldefault:0.6
Style
string | Function | string[]optionaldefault:{"scheme":"nivo"}
nivo
Defines color range.
stringoptionaldefault:'normal'
multiply
Defines CSS mix-blend-mode property.
number | (serie: Serie) => numberoptionaldefault:0.8
Area fill opacity.
number | (serie: Serie) => numberoptionaldefault:1
Area fill opacity for active series.
number | (serie: Serie) => numberoptionaldefault:0.15
Area fill opacity for inactive series.
number | (serie: Serie) => numberoptionaldefault:1
px
Area border width.
number | (serie: Serie) => numberoptionaldefault:1
px
Area border width for active series.
number | (serie: Serie) => numberoptionaldefault:0
px
Area border width for inactive series.
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",0.4]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute area border color.
number | (serie: Serie) => numberoptionaldefault:1
Area border opacity.
number | (serie: Serie) => numberoptionaldefault:1
Area border opacity for active series.
number | (serie: Serie) => numberoptionaldefault:0
Area border opacity for inactive series.
Labels
false | string | (serie: Serie) => stringoptionaldefault:false
numberoptionaldefault:12
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute start label text color.
false | string | (serie: Serie) => stringoptionaldefault:'id'
numberoptionaldefault:12
string | object | Functionoptionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
inherited property
color
modifiers
darker
Method to compute end label text color.
Grid & Axes
booleanoptionaldefault:true
   Enable/disable x grid.
objectoptional
Top axis configuration.
objectoptional
Bottom 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.
numberoptionaldefault:90
Motion stiffness.
numberoptionaldefault:15
Motion damping.