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.

roll the dice
Actions Logs
Start interacting with the chart to log actions
Base
AreaBumpSerie<Datum, ExtraProps>[]required

Chart data.

numberrequired

Chart width for non-responsive component.

numberoptional

Chart default width for responsive component.

numberrequired

Chart height for non-responsive component.

numberoptional

Chart default height for responsive component.

number (ms)optional

Debounce width/height updates for responsive component.

(dimensions: { width: number; height: number }) => voidoptional

A callback for when responsive component is resized.

objectoptional
px
px
px
px

Chart margin.

stringoptionaldefault:'middle'
middle

Chart alignment.

stringoptionaldefault:'smooth'

Area interpolation.

numberoptionaldefault:0

Spacing.

numberoptionaldefault:0.6

X padding.

Ref<SVGSVGElement>optional

Ref to the chart's container. Used on this page to generate/download the chart's image via html-to-image.

Style
Labels
Grid & Axes
Interactivity
Motion