Skip to content
UI Kit
Accent color

Comparison charts

Before and after, rankings, targets, shares of a whole and waterfalls that show how one value becomes another.

5 components · 22 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

comparison-chart

Comparison chart

Two states side by side, as a slope chart, a butterfly, diverging bars, an A/B test with intervals and confidence, or series indexed to 100 on one axis.

Props and details · Comparison chart

Slope

Before and after as two columns, one line per item. The two biggest movers keep the accent, a pointer brings any line forward.

Open in Studio

Butterfly

Two groups as bars to the left and right of a shared label column, each value at its bar end.

Open in Studio

Diverging

The change per item from one zero line, sorted from the biggest gain to the biggest loss, sign and arrow besides the tone.

Open in Studio

A/B test

Two versions with conversion rate and 95% interval on one scale, the lift, and a sentence that says how sure the result is.

Open in Studio

Indexed to 100

Series of very different size set to 100 at the start, so growth is comparable on one axis without a second scale.

Open in Studio

ranking-chart

Ranking chart

Who leads and how the order changes. As lollipops, a bump chart of ranks over time, a bar race with play and scrubber, a dot plot across sources or a leaderboard with movement and trend.

Props and details · Ranking chart

Lollipop

A ranked list as thin sticks with a dot, the leader in the accent, the value at each dot.

Open in Studio

Bump chart

Ranks over six months as lines, the rank in each dot. One line keeps the accent, the pointer brings any other forward.

Open in Studio

Bar race

Bars that reorder month by month once it scrolls in. Pause, play again, or drag the scrubber to any month.

Open in Studio

Dot plot

Up to three values per row as dots in color and shape, a line between the lowest and the highest, both named on hover.

Open in Studio

Leaderboard

Rank, the movement since last week with an arrow and a number, a share bar, a small trend and the value.

Open in Studio

bullet-chart

Bullet chart

A measure against its target with ranges for poor, fair and good behind it, as rows, upright columns, inside a table or as scorecards. Reaching a target shows a check and a word, not color alone.

Props and details · Bullet chart

Rows

One bullet per measure with its own scale, the value and the share of the target on the right.

Open in Studio

Columns

Upright bullets side by side, one per month, the value on top, a check or a warning under each.

Open in Studio

In a table

Small bullets in a table with actual, target and status. On phones every row folds into two lines.

Open in Studio

Scorecards

Cards in a hairline grid with the big number, the target, the bullet and how far there is to go.

Open in Studio

proportion-chart

Proportion chart

Shares that add up to 100%, as stacked rows, columns that show the mix over time, a marimekko where width is weight, or survey answers around a neutral middle.

Props and details · Proportion chart

Stacked rows

One 100% bar per row, the same parts in the same order, shares inside where they fit. The legend brings one part forward.

Open in Studio

Mix over time

One 100% column per month, so a shift in the mix shows even when the total grows.

Open in Studio

Marimekko

Column width is the size of a segment, the parts inside are its mix, so a big segment weighs as much as it should.

Open in Studio

Survey answers

Five answers from disagree to agree, the neutral middle on one line, agreement to the right and the net share beside each statement.

Open in Studio

waterfall-chart

Waterfall chart

How a start value becomes an end value, step by step. As a bridge, a statement with subtotals, rows for long names, or money in and out with the balance. On phones the columns become rows.

Props and details · Waterfall chart

Bridge

From last year to this year. Gains and losses float on the running total, thin connectors carry it on.

Open in Studio

With subtotals

A month as a statement, with revenue, costs in groups and the subtotals between them back on the baseline.

Open in Studio

Rows

The steps as rows, long names on the left, the change at each bar end. Works for any unit, here milliseconds.

Open in Studio

Cash flow

Money in above and out below the zero line per month, the balance as a line on the same scale.

Open in Studio

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Comparison charts on a page.

Often searched

Jump to

Copied to the clipboard