# Bump chart in Figma

> How rankings change over time

A bump chart plots rank rather than value, so lines cross whenever positions swap. It answers "who overtook whom, and when" — a question a normal line chart makes you work out for yourself.

## Available in 1 of 5 chart libraries

| Library | Ready-made examples |
| --- | --- |
| D3 · Nivo | 1 |

1 examples in total.

These are the real charting libraries running inside the plugin, not redrawn lookalikes. The bump chart on your canvas is the library's own output, and the Export tab hands developers that same library's configuration plus React, Vue, Angular or Svelte code — so what you design is what gets built.

## Reach for it when

- League tables, chart positions, market rankings over several periods.
- The story is about order changing, not about the size of the gap.

## Use something else when

- The magnitudes matter — rank hides that first place is ten times second.
- Ranks barely move; you get a set of flat parallel lines.

## The data it needs

One row per competitor, one column per period, values are ranks.

| Team | Q1 | Q2 | Q3 |
| --- | --- | --- | --- |
| Alpha | 1 | 2 | 1 |
| Beta | 2 | 1 | 3 |
| Gamma | 3 | 3 | 2 |

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

All chart types: https://systergon.com/figma-charts/chart-types