AreaBump

@nivo/bump
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
AreaBumpSerie<Datum, ExtraProps>[]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

Spacing.

numberoptionaldefault:0.6

X padding.

Style
Themeoptional

Define style for common elements such as labels, axes…

OrdinalColorScaleConfigoptionaldefault:{"scheme":"nivo"}
Categorical: Nivo

Define chart's colors.

CssMixBlendModeoptionaldefault:'normal'
multiply

Define CSS mix-blend-mode for areas.

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

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

numberoptionaldefault:12

Define area start label padding.

InheritedColorConfig<AreaBumpComputedSerie>optionaldefault:{"from":"color","modifiers":[["darker",1]]}
inheritthemecustom
inherited property
color
modifiers
darker

Method to compute start label text color.

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

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

numberoptionaldefault:12

Define area end label padding.

InheritedColorConfig<AreaBumpComputedSerie>optionaldefault:{"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.

string[]optional

Default active serie ids.

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

onMouseEnter handler.

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

onMouseMove handler.

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

onMouseLeave handler.

(serie: AreaBumpComputedSerie, 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.