the charts module
Chart Gallery, Every Type Live
79 chart types, each one drawn here by the grid itself rather than shown as a picture of it. Scroll down and a tile draws as it comes into view; open any of them to see it full size, on its own page, with the code that made it.
Worked examples with code
Live charts with a note on when to use each and the exact code that draws it.
- Polar charts: Polar area chart (Nightingale rose), Radial bar chart, Polar scatter chart
- Hierarchy charts: Force-directed tree chart, Packed circles chart, Voronoi treemap, Tree chart and dendrogram
- Flow and set charts: Directed chord diagram, Funnel pyramid chart, Pictorial chart, Venn diagram, Word cloud chart
- Timeline charts: Serpentine timeline chart, Spiral timeline chart, Bar chart race, Motion chart
- Globe chart: Globe map chart
- Animation and crosshair: Chart animation, Chart crosshair and synced cursors
- Responsive charts and fills: Responsive chart rules, Chart gradient and pattern fills, image markers
- Editable charts: Drag to edit chart
- Zoom and measure: Chart zoom, pan and follow, Chart measure tool, Freehand pen on a chart
- Chart variations: Lollipop chart, 100% stacked bar chart, Smoothed line chart, Half pie and donut chart, Variable-radius pie chart
Bars & columns
A measure by category, ranked, split or run down to zero.
Loading a live grid…
Bar
Comparing a measure across a handful of categories.
Loading a live grid…
Horizontal bar
The same comparison, when the category labels run long.
Loading a live grid…
Floating bar
A span from a low value to a high one, such as a range or a duration.
Loading a live grid…
Horizontal floating bar
The same span, laid on its side so long labels stay readable.
Loading a live grid…
Waterfall
A running total, built up or drawn down step by step, with a closing total bar when you set waterfall: { total: true }.
Loading a live grid…
Pareto
Which categories make up most of the total, with a cumulative line.
Loading a live grid…
Combo
Two measures on very different scales, read side by side.
Loading a live grid…
Dumbbell
A before-and-after value for each category, and the gap between them.
Lines & areas
A measure over a continuous axis, and how it compares or spreads.
Loading a live grid…
Line
A measure moving over a continuous axis.
Loading a live grid…
Step
A value that holds until it changes, rather than drifting between readings.
Loading a live grid…
Area
A line with its own weight against the axis made visible.
Loading a live grid…
Range area
A band between a low and a high reading, not a single line.
Loading a live grid…
Scatter
Whether two measures move together, point by point.
Loading a live grid…
Scatter 3D
Three measures at once, as a point cloud you orbit and zoom.
Loading a live grid…
Bubble
The same relationship, with a third measure sized in.
Loading a live grid…
Bump
Rank changing hands between categories over time.
Loading a live grid…
Slope
One measure at two points, and who moved most between them.
Loading a live grid…
Fan
A forecast that shows its own uncertainty, not just a single line.
Part-to-whole
How a total splits, flat or nested.
Loading a live grid…
Pie
How a total splits across a few categories.
Loading a live grid…
Donut
The same split, with the centre free for a total or a label.
Loading a live grid…
Treemap
A split where the shares are too lopsided for a slice to read.
Loading a live grid…
Sunburst
A split with a second level nested inside the first.
Loading a live grid…
Waffle
A share of a total, read as a count of squares rather than an angle.
Loading a live grid…
Icicle
A nested split read left to right instead of ring by ring.
Distribution
The shape and spread of one column, not just its total.
Loading a live grid…
Histogram
How one column’s values are spread across its range.
Loading a live grid…
Box plot
The median, the middle half and the outliers of a column, at a glance.
Loading a live grid…
Violin
A distribution’s full shape, compared across categories.
Loading a live grid…
ECDF
What share of rows sits under a value, with no binning choice to argue about.
Loading a live grid…
Lorenz curve
How concentrated a total is among the rows that hold it.
Loading a live grid…
Ridgeline
Several distributions stacked so their shapes compare directly.
Correlation & statistics
How columns relate, and whether a process or a score holds up.
Loading a live grid…
Correlogram
How every numeric column relates to every other, in one matrix.
Loading a live grid…
Q-Q plot
Whether a column follows a normal distribution.
Loading a live grid…
SPLOM
Every pair of numeric columns plotted against each other at once.
Loading a live grid…
Hexbin
A scatter with too many points to read as individual dots.
Loading a live grid…
ROC
How well a score separates a rare outcome from the rest.
Loading a live grid…
Control chart
A process drifting from its own normal, apart from any external spec.
Loading a live grid…
Diverging
A change that runs both positive and negative across categories.
Loading a live grid…
Moving range
How much a reading moves from the one before it, the companion to a control chart.
Loading a live grid…
Capability
A process's spread against its tolerance, not just against its own history.
Loading a live grid…
Forest
A regression coefficient, its estimate and its confidence interval, one row per predictor.
Flow & hierarchy
How volume moves between categories, or nests inside them.
Loading a live grid…
Sankey
How volume moves from one category into another.
Loading a live grid…
Chord
Flow between categories in both directions, arranged in a ring.
Loading a live grid…
Network
Connections between named things, positioned the way you draw them.
Loading a live grid…
Alluvial
How rows move between two categories, sized by a measure.
Loading a live grid…
Arc
Which categories connect to which, along a single line of nodes.
Loading a live grid…
Parallel
Where one row sits across several numeric columns at once.
Loading a live grid…
Decomposition
A series pulled apart into its trend, its season and what is left over.
Loading a live grid…
Force tree
A hierarchy drawn as a graph that settles round its root.
Loading a live grid…
Packed circles
A hierarchy as circles inside circles, to explore by clicking in.
Loading a live grid…
Voronoi treemap
A treemap with softer cells, each fitted to its share.
Loading a live grid…
Tree
A tidy node-link tree or a dendrogram of a hierarchy.
Polar
A measure as a distance from a centre, a category or a time as an angle.
Loading a live grid…
Polar area
A cycle such as months or hours, with the busy season read as a shape.
Loading a live grid…
Radial bar
Progress against a target for a handful of teams, in a round tile.
Loading a live grid…
Polar scatter
Readings with a bearing or a time of day, by direction and size.
Time & schedule
A plan, a price or a mix, read against the calendar.
Loading a live grid…
Gantt
A plan of activities with a start and an end, laid out on a timeline.
Loading a live grid…
Calendar
A daily figure read the way a calendar reads, week by week.
Loading a live grid…
Candlestick
A daily open, high, low and close, in the form traders read.
Loading a live grid…
Open, high, low, close
A daily open, high, low and close drawn as bars with ticks.
Loading a live grid…
Stream
How a mix of categories shifts, as a smooth flowing band.
Loading a live grid…
Marimekko
Two dimensions of size compared at once, width and height both meaning something.
Loading a live grid…
Serpentine
A long history folded into rows.
Loading a live grid…
Spiral
A rhythm that repeats every day, week or year.
Loading a live grid…
Bar chart race
Who overtook whom, played through time.
Loading a live grid…
Motion
Several measures changing together, one bubble per entity.
Maps
A value at a place, by code, by coordinate, or by its own boundary.
Loading a live grid…
Geomap
A value against a place, read from an ISO country code.
Loading a live grid…
Bubblemap
A value at a coordinate, sized by how large it is.
Loading a live grid…
Markermap
A value at a coordinate, coloured rather than sized.
Loading a live grid…
Hexmap
Points laid onto a hex grid instead of raw coordinates.
Loading a live grid…
Choropleth
A value filled straight into each row's own boundary, no separate map pack.
Specialist
The shape a particular question is built for.
Loading a live grid…
Radar
Several measures for one category, read as a shape.
Loading a live grid…
Gauge
One figure read against a target.
Loading a live grid…
Bullet
Several KPIs, each read against its target and its bands.
Loading a live grid…
Population pyramid
Two groups mirrored about a central axis, band by band.
Loading a live grid…
Funnel
A count that narrows through a set of stages.
Loading a live grid…
Heatmap
A measure at the crossing of two categories, read as colour.
Loading a live grid…
Funnel pyramid
Ordered stages as slices of one triangle.
Loading a live grid…
Pictorial
A quantity told with a row of icons.
Loading a live grid…
Venn
How rows overlap across two or three sets.
Loading a live grid…
Word cloud
What a column of free text keeps saying.
Read how a chart binds to a grid → See a wall of charts follow one filter →