React chart example
Slope chart
Compare two points in time and show which series changed rank.
What is a slope chart?
A slope chart plots two moments on parallel axes and joins each series with a straight line. The slope shows the direction and rate of change, and crossing lines show re-ranking.
When to use it
Use it for before-and-after comparisons across a set of categories — market share in two years, scores before and after a change. It is more direct than a full line chart when only the endpoints matter. Use a dumbbell chart when the gap size matters more than the crossing.
Design tips
Label both ends directly; a legend forces the reader to look away from the lines.
Grey out the lines that did not move and colour the ones that did.
Keep both axes on the same scale, or the slopes mean nothing.
Build this chart in React
Compare with
Use when changes across more than two periods matter.
Use when gap size matters more than crossings or rank changes.
Graphy Chart SDK
Add Graphy’s slope charts to your React app.
Ship quickly with one maintained SDK, without building and maintaining the entire charting experience yourself.