Zopra/Charts
Guide
Getting startedAll chartsWhich chart to use?Domain specific
Base charts7
XY ChartTrendCandlestickHeatmapState TimelineFlame GraphBar Gauge
Derived charts73
Time SeriesHistogramStatus HistoryStatGaugeHoneyCombTracesNode GraphHeikin-AshiRenkoKagiPoint & FigureParetoIshikawaControl ChartBland-AltmanLollipopDumbbellSlopeBumpBack-to-BackWaterfallBulletFunnelMekkoForestBarcodeBeeswarmRidgelineHorizonSpectrogramAttention MapWaffleVennUpSetWarped WaffleWord CloudGanttSankeySankey MatrixTreemap ForceChord DiagramCircosArc DiagramAlluvialSankey FunnelDendrogramIcicleSunburstSpiderNightingale RoseParallel CoordinatesOscilloscopeEfficient FrontierPhase PortraitPoincaré MapBifurcationH-R DiagramRamachandranHarkerRoot LocusRadiation PatternQuiverHodographSmith ChartEye DiagramSequence LogoTernaryTernary ContourPiperStüveTephigramChoropleth

Choosing

Which chart to use?

Do not start from the chart. Start from the sentence you want the reader to say out loud after looking at it. Find that sentence below, and every chart that can help is one click away.

Compare thingsShow parts of a wholeSee something change over timeSee how values are spreadSee how variables relateShow flows and connectionsSee how groups overlapSee a hierarchy or a profileShow one numberChart pricesSignals and controlDynamics and chaosEarth, weather and geologyBiology and textHunting for a cause

01

I want to compare things

Same measure, different items. The eye is good at lengths and positions, so these charts lean on both.

Lollipop preview

Lollipop

<Lollipop>

You have a long list of categories and bars would be a wall of ink.

MathExamplesAPI
Dumbbell preview

Dumbbell

<Dumbbell>

Each item has a before and an after, and the gap is the story.

MathExamplesAPI
Slope preview

Slope

<Slope>

Two moments, many items, and you want to see who crossed whom.

MathExamplesAPI
Bump preview

Bump

<Bump>

Rank matters more than the value, and it changes over time.

MathExamplesAPI
Back-to-Back preview

Back-to-Back

<BackToBack>

Two groups share the same categories, such as men and women by age band.

MathExamplesAPI
Bullet preview

Bullet

<Bullet>

Each value has a target and some qualitative ranges to sit in.

MathExamplesAPI
Spider preview

Spider

<Spider>

One item scored on several measures, and you want to see its shape against another.

MathExamplesAPI
Bar Gauge preview

Bar Gauge

<BarGauge>

You want to show how full each value is between a minimum and a maximum.

MathExamplesAPI
Forest preview

Forest

<Forest>

Every row is an estimate with a confidence interval, such as a study.

MathExamplesAPI

02

I want to show parts of a whole

Shares, mixes and breakdowns. Pie charts are on holiday. These are the people covering for them.

Mekko preview

Mekko

<Mekko>

The size of each group matters as much as its internal mix.

MathExamplesAPI
Waffle preview

Waffle

<Waffle>

You want people to count units, such as 63 out of 100 users.

MathExamplesAPI
Warped Waffle preview

Warped Waffle

<WarpedWaffle>

A waffle, but bent into a ring when the page needs to feel like a dashboard.

MathExamplesAPI
Sunburst preview

Sunburst

<Sunburst>

The whole splits into parts, which split into parts, a few levels deep.

MathExamplesAPI
Icicle preview

Icicle

<Icicle>

The hierarchy is deep or the names are long and need room to breathe.

MathExamplesAPI
Treemap Force preview

Treemap Force

<TreemapForce>

Groups have sizes and the items inside are also linked to each other.

MathExamplesAPI
Ternary preview

Ternary

<Ternary>

Every observation is a mixture of exactly three components that sum to one.

MathExamplesAPI
Nightingale Rose preview

Nightingale Rose

<NightingaleRose>

The parts repeat around a cycle, like months or hours of the day.

MathExamplesAPI
Funnel preview

Funnel

<Funnel>

Each stage keeps only some of the previous stage, and you want to see the leak.

MathExamplesAPI

03

I want to see something change over time

A line is the default for good reason. These are the options for when the default is not enough.

Time Series preview

Time Series

<TimeSeries>

One or more measurements over time, with annotations or a comparison to last week.

MathExamplesAPI
Trend preview

Trend

<Trend>

The x-axis is not time but still only goes up, such as distance or load.

MathExamplesAPI
Horizon preview

Horizon

<Horizon>

Many series, little height, and you still want to see the shape of each.

MathExamplesAPI
State Timeline preview

State Timeline

<StateTimeline>

A thing is in one of a few states, and you care how long each lasted.

MathExamplesAPI
Status History preview

Status History

<StatusHistory>

A grid of checks or jobs over time, one cell each.

MathExamplesAPI
Gantt preview

Gantt

<Gantt>

Tasks with a start and an end, and who is waiting for whom.

MathExamplesAPI
Heatmap preview

Heatmap

<Heatmap>

Time on one axis and a value range on the other, and the counts are the story.

MathExamplesAPI
Bump preview

Bump

<Bump>

The question is who was ahead, not by how much.

MathExamplesAPI

04

I want to see how values are spread

Averages hide things. These charts show the whole crowd, including the person standing awkwardly at the back.

Histogram preview

Histogram

<Histogram>

One variable, one picture, counts per bucket.

MathExamplesAPI
Barcode preview

Barcode

<Barcode>

You want to see every value as a tick, without binning anything.

MathExamplesAPI
Beeswarm preview

Beeswarm

<Beeswarm>

Every point deserves to be seen, grouped by category, with no overlaps.

MathExamplesAPI
Ridgeline preview

Ridgeline

<Ridgeline>

You want to compare the shapes of many distributions, stacked like mountains.

MathExamplesAPI
Heatmap preview

Heatmap

<Heatmap>

A distribution that changes over time, so every column is a histogram.

MathExamplesAPI
Control Chart preview

Control Chart

<ControlChart>

Is this process still behaving, or has something changed?

MathExamplesAPI
Bland-Altman preview

Bland-Altman

<BlandAltman>

Two methods measure the same thing and you want to know if they agree.

MathExamplesAPI
Spectrogram preview

Spectrogram

<Spectrogram>

A signal's frequencies as they change over time.

MathExamplesAPI

05

I want to see how variables relate

Correlation, trade-off and structure. Draw it before you fit it.

XY Chart preview

XY Chart

<XYChart>

Two numeric variables, optionally a third as size or colour.

MathExamplesAPI
Parallel Coordinates preview

Parallel Coordinates

<ParallelCoordinates>

Many variables per item, and you want to see which items run alike.

MathExamplesAPI
Efficient Frontier preview

Efficient Frontier

<EfficientFrontier>

Risk against return, and the edge of what is possible.

MathExamplesAPI
Attention Map preview

Attention Map

<AttentionMap>

A matrix of weights, such as which token looks at which token.

MathExamplesAPI
H-R Diagram preview

H-R Diagram

<HrDiagram>

A scatter whose shape is the whole point: stars, by temperature and brightness.

MathExamplesAPI
Ternary Contour preview

Ternary Contour

<TernaryContour>

A value that changes across the three-part mixture triangle.

MathExamplesAPI
Dendrogram preview

Dendrogram

<Dendrogram>

You want to see which items cluster together, and how tightly.

MathExamplesAPI

06

I want to show flows and connections

Things moving from here to there, or being linked to each other. Arrows are cheap. Clarity isn't.

Sankey preview

Sankey

<Sankey>

Quantities flow through stages and you want to see where they go.

MathExamplesAPI
Sankey Funnel preview

Sankey Funnel

<SankeyFunnel>

A funnel in which you also care where the drop-offs went.

MathExamplesAPI
Sankey Matrix preview

Sankey Matrix

<SankeyMatrix>

A Sankey that got too tangled, and you want exact values per pair.

MathExamplesAPI
Alluvial preview

Alluvial

<Alluvial>

Groups change membership between a few moments in time.

MathExamplesAPI
Chord Diagram preview

Chord Diagram

<ChordDiagram>

Flows between every pair of groups, in both directions.

MathExamplesAPI
Arc Diagram preview

Arc Diagram

<ArcDiagram>

Links between items in a meaningful order, such as time or position.

MathExamplesAPI
Circos preview

Circos

<Circos>

Links between positions on long segments, like a genome.

MathExamplesAPI
Node Graph preview

Node Graph

<NodeGraph>

Services and the calls between them, with health at a glance.

MathExamplesAPI
Treemap Force preview

Treemap Force

<TreemapForce>

A graph whose nodes also belong to groups of different sizes.

MathExamplesAPI

07

I want to see how groups overlap

Who is in A, who is in B, and who is awkwardly in both.

Venn preview

Venn

<Venn>

Two or three sets, where the shapes can be exact.

MathExamplesAPI
UpSet preview

UpSet

<UpSet>

Four or more sets, or you need to read exact combination sizes.

MathExamplesAPI

08

I want to see a hierarchy or a profile

Things inside things inside things.

Flame Graph preview

Flame Graph

<FlameGraph>

Where does a program spend its time, call by call?

MathExamplesAPI
Icicle preview

Icicle

<Icicle>

Same as a flame graph, but the tree is anything you like.

MathExamplesAPI
Sunburst preview

Sunburst

<Sunburst>

A compact tree with a few levels and shares at each.

MathExamplesAPI
Dendrogram preview

Dendrogram

<Dendrogram>

A tree of merges, with the height of each merge meaning something.

MathExamplesAPI
Traces preview

Traces

<Traces>

One request, many services, and where the time went.

MathExamplesAPI
Ishikawa preview

Ishikawa

<Ishikawa>

A problem with a list of possible causes, grouped by category.

MathExamplesAPI

09

I want to show one number

A dashboard is mostly numbers in costumes.

Stat preview

Stat

<Stat>

A big number with its history and its change.

MathExamplesAPI
Gauge preview

Gauge

<Gauge>

A value on a scale with thresholds that mean something.

MathExamplesAPI
Bar Gauge preview

Bar Gauge

<BarGauge>

Several values, each against its own range.

MathExamplesAPI
Bullet preview

Bullet

<Bullet>

A value against a target, with qualitative bands behind it.

MathExamplesAPI
HoneyComb preview

HoneyComb

<HoneyComb>

Many numbers, each one a cell, coloured by state.

MathExamplesAPI

10

I want to chart prices

There are five ways to draw the same market. Each one is a different opinion about time.

Candlestick preview

Candlestick

<Candlestick>

Open, high, low and close per period, with volume.

MathExamplesAPI
Heikin-Ashi preview

Heikin-Ashi

<HeikinAshi>

You want candles that smooth over the noise and make trends easier to see.

MathExamplesAPI
Renko preview

Renko

<Renko>

Time is a distraction and only price moves of a set size matter.

MathExamplesAPI
Kagi preview

Kagi

<Kagi>

Reversals matter, and you want thick and thin lines to mark the regime.

MathExamplesAPI
Point & Figure preview

Point & Figure

<PointFigure>

A column of Xs and Os, because someone in your trading room insists.

MathExamplesAPI
Waterfall preview

Waterfall

<Waterfall>

Starting value, a list of gains and losses, ending value.

MathExamplesAPI

11

I work with signals and control

Waveforms, spectra and the stability of things that feed back on themselves.

Oscilloscope preview

Oscilloscope

<Oscilloscope>

A waveform, triggered and drawn like the real instrument.

MathExamplesAPI
Spectrogram preview

Spectrogram

<Spectrogram>

Frequency content over time.

MathExamplesAPI
Eye Diagram preview

Eye Diagram

<EyeDiagram>

A high-speed link, and whether its bits can still be told apart.

MathExamplesAPI
Smith Chart preview

Smith Chart

<SmithChart>

Impedance and matching on a transmission line.

MathExamplesAPI
Root Locus preview

Root Locus

<RootLocus>

How the poles of a loop move when you turn the gain.

MathExamplesAPI
Radiation Pattern preview

Radiation Pattern

<RadiationPattern>

How an antenna sends power in different directions.

MathExamplesAPI

12

I study dynamics and chaos

When a system has a state and rules for how the state changes.

Phase Portrait preview

Phase Portrait

<PhasePortrait>

The trajectories of a system in its state space.

MathExamplesAPI
Poincaré Map preview

Poincaré Map

<PoincareMap>

A continuous system sampled once per cycle.

MathExamplesAPI
Bifurcation preview

Bifurcation

<Bifurcation>

How long-term behaviour changes as a parameter is turned.

MathExamplesAPI
Quiver preview

Quiver

<Quiver>

A vector field drawn as little arrows.

MathExamplesAPI
Hodograph preview

Hodograph

<Hodograph>

The path of a vector's tip, such as wind with height.

MathExamplesAPI

13

I work with earth, weather and geology

Maps, soundings and the chemistry of rocks and water.

Choropleth preview

Choropleth

<Choropleth>

A value per region, shaded on a map.

MathExamplesAPI
Stüve preview

Stüve

<Stuve>

An atmospheric sounding on straight isotherms and adiabats.

MathExamplesAPI
Tephigram preview

Tephigram

<Tephigram>

The same sounding, on the diagram your forecasters grew up on.

MathExamplesAPI
Piper preview

Piper

<Piper>

Groundwater chemistry, with all the major ions in one picture.

MathExamplesAPI
Harker preview

Harker

<Harker>

How oxides change as magma gets more evolved.

MathExamplesAPI
Ternary preview

Ternary

<Ternary>

A mix of three things, such as sand, silt and clay.

MathExamplesAPI

14

I work with biology and text

Letters, structures and words.

Sequence Logo preview

Sequence Logo

<SequenceLogo>

Which letters are conserved at each position of an alignment?

MathExamplesAPI
Ramachandran preview

Ramachandran

<Ramachandran>

The backbone angles of a protein.

MathExamplesAPI
Circos preview

Circos

<Circos>

A genome with links, rings and coverage tracks.

MathExamplesAPI
Word Cloud preview

Word Cloud

<WordCloud>

A first impression of which words come up most.

MathExamplesAPI

15

I am hunting for a cause

Something is wrong, and you need to find out what before the meeting.

Pareto preview

Pareto

<Pareto>

A few causes make most of the trouble, and you want to see which.

MathExamplesAPI
Ishikawa preview

Ishikawa

<Ishikawa>

You need to brainstorm causes by category before you measure them.

MathExamplesAPI
Control Chart preview

Control Chart

<ControlChart>

You need to know whether the process changed or just wobbled.

MathExamplesAPI
Flame Graph preview

Flame Graph

<FlameGraph>

The thing that is slow is a program.

MathExamplesAPI
Traces preview

Traces

<Traces>

The thing that is slow is a request across services.

MathExamplesAPI
Still undecided? Browse all charts or look at them by domain.