AreaBump

@nivo/bumpsvgisomorphic
svg

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
optional
Define style for common elements such as labels, axes…
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.
object[]optional
Define patterns and gradients.
object[]optional
Define rules to apply patterns and gradients
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.
string | objectoptionaldefault:'gentle'
gentle
Motion config for react-spring, either a preset or a custom configuration.