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.
falseUse a voronoi mesh to detect mouse interactions.
falseDisplay mesh used to detect mouse interactions (voronoi cells).
onMouseEnter handler.
onMouseMove handler.
onMouseLeave handler.
onClick handler.
Custom line tooltip component, used when useMesh is false.
Custom point tooltip component, used when useMesh is true.
trueEnable/disable transitions.
'gentle'Motion config for react-spring, either a preset or a custom configuration.