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.
Chart data.
Chart width.
Chart height.
Chart margin.
'smooth'Line interpolation.
0.6X padding.
0.5X outer padding.
0.5Y outer padding.
Define style for common elements such as labels, axes…
Define chart's colors.
2Line width.
4Line width for active series.
1Line width for inactive series.
1Opacity.
1Opacity for active series.
0.3Opacity for inactive series.
falseStart label, use a boolean to enable/disable, or a function to customize its text.
16Start label padding.
Method to compute start label text color, or a function to customize its text.
trueEnd label, use a boolean to enable/disable, or a function to customize its text.
16End label padding.
Method to compute end label text color.
6Point size.
8Point size for active series.
4Point size for inactive series.
Method to compute point fill color.
0Point border width.
0Point border width for active series.
0Point border width for inactive series.
Method to compute point border color.
trueEnable/disable x grid.
trueEnable/disable y grid.
Top axis configuration.
Right axis configuration.
Bottom axis configuration.
Left axis configuration.
trueEnable/disable interactivity.
onMouseEnter handler.
onMouseMove handler.
onMouseLeave handler.
onClick handler.
Custom tooltip component.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.