Examples

Types of graphs, drawn live

Twenty-five chart and table types, one engine, no screenshots. Start with the question you are asking — or find a chart you know by name — then preview its shape live and open the guide for real-world examples, honest when-to-use notes and specs you can copy straight into a page.

25 of 25 example guides

How do these compare?

Compare

Side by side, ranked, or as the gap between two readings — amounts across a handful of categories.

Bar chart examples
Lollipop chart examples
Dumbbell chart examples

What changed over time?

Over time

Readings in order: the trend, the volume underneath it, the steps a value holds, or only the start and the end.

Line graph examples
Area chart examples
Step chart examples
Slope chart examples
Bump examples
Streamgraph examples

What makes up the whole?

Parts of a whole

Shares of one total — as slices, as a hundred squares, or stacked into the total itself.

Pie chart examples
Waffle chart examples
Treemap examples
Sunburst examples
Stacked bar chart examples

Where is the pattern?

Spread & patterns

Individual readings and their shape: clusters, frequency, spread and the outliers an average would bury.

Histogram examples
Dot plot examples
Ridgeline examples
Scatter plot examples

Did we hit the number?

Totals & targets

Build a total step by step, put an actual beside its target, or give the one figure the whole page.

Waterfall chart examples
Bullet chart examples
Big number examples

What is the status of everything?

Grids & tables

Rows and columns that stay readable — statuses as shapes, numbers as tone, or the whole table kept live.

Status matrix examples
Heat map examples
Live table examples

Where does it go?

Flows

Follow money, energy or people from their sources to their destinations.

Sankey examples

How to make a graph

  1. 01

    Pick the shape that matches your question — compare, trend, share, or distribution. The pages above end with an honest “not for” line when another type would serve you better.

  2. 02

    Open its maker and paste your rows — typed by hand, or columns straight from a spreadsheet. The chart redraws as you type, and nothing you paste leaves your browser.

  3. 03

    Take it anywhere: an embed snippet that stays live, a PNG or SVG for slides and docs, or a link that carries the whole chart in its address.