Chart Catalogue

Chart Catalogue

All 114 charts, grouped by category. Every title links straight into the studio, where the chart opens with editable data and a copyable snippet.

The Data column names the table layout it reads — see Data Formats for what each means and how to lay one out.

Jump to: Line & Area · Bar · Deviation · Part to Whole · Radar · Scatter · Distribution · Hierarchy · Network · Flow · Comparison · Finance · Geo · KPI & Micro · Custom Engine

Line & Area

13 charts.

Chart	What it is for	Engine	Data
Basic Line	A single measure over time — the default answer to "how has this moved?"	Chart.js	labelSeries
Multi-Series Line	Several measures on one scale, so the reader compares shapes rather than levels.	Chart.js	labelSeries
Stepped Line	For values that hold flat then jump — prices, tiers, headcount.	Chart.js	labelSeries
Stepped Line — Multi	Two plans side by side, each holding its price until it changes.	Chart.js	labelSeries
Area	A filled line. The fill implies accumulation, so use it for volumes, not rates.	Chart.js	labelSeries
Stacked Area	Composition over time. Only the bottom band has a flat baseline — read the total, not the middles.	Chart.js	labelSeries
Confidence Band	A mean line inside an upper and lower bound — a forecast that admits its uncertainty.	Chart.js	labelValue
100% Stacked Area	Share of total over time. Every column sums to 100, so only the mix moves.	Chart.js	labelSeries
Step Area	A stepped line with the space beneath filled — discrete states that hold, then change.	Chart.js	labelSeries
Fan Chart	A projection whose uncertainty widens with distance. History is one line; the future is a spread.	Chart.js	labelValue
Horizon Chart	An area chart folded into bands so it survives being one-quarter the height. Density over precision.	Canvas 2D	rowSeries
Spiral Plot	Time coiled outward so each turn is one cycle — weekly or seasonal rhythm becomes visible.	Canvas 2D	labelValue
Radial Line	A cycle wrapped into a circle, so the end of one turn meets the start of the next. For seasons, hours and anything that repeats.	Canvas 2D	labelSeries

Bar

9 charts.

Chart	What it is for	Engine	Data
Vertical Bar	Discrete comparison across a handful of categories. The workhorse.	Chart.js	labelSeries
Stacked Bar	Parts inside a total. Reliable for the total and the bottom band, harder for the middles.	Chart.js	labelSeries
Horizontal Bar	Rotate when the category names are long — labels stay readable and ranking reads top-down.	Chart.js	labelValue
100% Stacked Bar	Share of total per group. Every column reaches 100%, so only the mix is comparable.	Chart.js	labelSeries
Diverging Bar	Signed values around a zero baseline — variance, sentiment, net change.	Chart.js	labelValue
Floating Bar (Gantt)	Bars given a start and an end instead of a length — schedules and ranges.	Chart.js	pairs
Waterfall	How a starting figure becomes an ending figure, one contribution at a time.	Chart.js	items
Butterfly (Population Pyramid)	Two groups mirrored across a shared category axis. One side is negated to fan out.	Chart.js	pairs
Lollipop	A bar reduced to a stem and a dot — less ink for the same ranking, at any density.	Canvas 2D	items

Deviation

3 charts.

Chart	What it is for	Engine	Data
Surplus / Deficit Line	One line against a baseline, filled two colours. Reads sign and magnitude at once.	Canvas 2D	labelValue
Diverging Stacked Bar (Likert)	Survey responses split around a neutral centre. The standard chart for agree/disagree scales.	Chart.js	rowSeries
Spine Chart	Two contrasting groups either side of a shared spine, with the categories down the middle.	Canvas 2D	pairs

Part to Whole

11 charts.

Chart	What it is for	Engine	Data
Pie	Share of a single total. Honest up to about five slices, misleading beyond that.	Chart.js	labelValue
Doughnut	A pie with the middle removed — the hole is free space for a headline number.	Chart.js	labelValue
Gauge	A half doughnut reading one number against its ceiling. Score, capacity, progress.	Chart.js	labelValue
Polar Area	Equal angles, varying radius. Reads cyclical magnitude better than a pie.	Chart.js	labelValue
Nightingale Rose	Florence Nightingale's coxcomb: radius scaled by square root so area, not length, carries the value.	Canvas 2D	labelValue
Waffle	A hundred squares. Counting beats angle-judging, so small shares stay legible.	DOM / CSS	items
Dot Matrix	One dot per unit, blocked by category. The count is there to be counted rather than estimated off an axis.	Canvas 2D	items
Proportional Area	Shapes scaled so area — not width — carries the value. Nested to make the ratio directly comparable.	Canvas 2D	items
Radial Column	Bars grown outward from a common circle. Fits many more categories than a bar chart, at the cost of comparing them exactly.	Canvas 2D	labelValue
Nested Proportional Area	Circles sized by area and drawn one inside another. Shows a part sitting inside its whole rather than beside it.	Canvas 2D	items
Pictogram (Isotype)	Counting in icons rather than squares. Isotype’s rule still holds: repeat the symbol, never scale it.	Canvas 2D	items

Radar

3 charts.

Chart	What it is for	Engine	Data
Radar	One profile across several dimensions. Good for shape, poor for exact values.	Chart.js	labelSeries
Radar — Comparison	Overlaid profiles. Three is the practical ceiling before the shapes stop separating.	Chart.js	labelSeries
Radar — Filled	A single strongly filled profile, when the silhouette is the whole message.	Chart.js	labelSeries

Scatter

8 charts.

Chart	What it is for	Engine	Data
Scatter	Two measures per item. The eye reads correlation from the cloud, not from any one dot.	Chart.js	labelValue
Scatter — Clusters	Segments given their own colour, so the groups separate without a legend hunt.	Chart.js	xyGroups
Bubble	A scatter with a third measure in the radius. Area encodes size — never diameter.	Chart.js	xyGroups
Hexagonal Binning	Counts points into hexagons and shades by how many landed in each. Reads density where a scatter has gone solid.	Canvas 2D	labelValue
Scatterplot Matrix	Every pair of variables plotted against every other. Finds the relationship worth a chart of its own.	Canvas 2D	labelSeries
2D Density Contour	Smooths a cloud of points into nested bands of equal density — a topographic map of where the data sits.	D3	labelValue
Connected Scatter	A scatter whose points are joined in time order — traces how two variables moved together.	Chart.js	xyGroups
Quadrant Chart	A scatter cut into four named zones. The labels do the interpreting, which is the whole appeal — and the risk.	Canvas 2D	items

Distribution

11 charts.

Chart	What it is for	Engine	Data
Histogram	Counts per bucket. Bin width is a real editorial choice — change it and see.	Chart.js	observations
Box Plot	Median, quartiles, whiskers and outliers — five numbers that survive skew.	Chart.js	observations
Violin	A mirrored kernel density estimate. Shows shape a box plot flattens — bimodality, skew.	Canvas 2D	observations
Heatmap	Density across two categorical axes. Colour carries the value, position carries the key.	Chart.js	matrix
Density Plot	A smoothed histogram. No bin-width argument, but the bandwidth choice is doing the same work.	Canvas 2D	observations
Ridgeline Plot	Densities stacked and overlapped down the page. Trades exact values for a very readable shift.	Canvas 2D	observations
Cumulative Curve (ECDF)	Every point answers "what share is below this value?" — no binning decision to argue about.	Canvas 2D	observations
Beeswarm	Every observation as its own dot, nudged aside so none hide. Honest about sample size.	Canvas 2D	observations
Barcode Plot	One thin tick per observation on a shared scale. Reads clustering and outliers in almost no height.	Canvas 2D	observations
Radial Histogram	Bins wrapped around a circle. The right choice when the variable itself is angular — wind, time of day.	Canvas 2D	labelValue
Stem & Leaf Plot	A histogram that keeps the digits. The bars are made of the numbers themselves, so nothing is rounded away.	Canvas 2D	observations

Hierarchy

7 charts.

Chart	What it is for	Engine	Data
Treemap	Nested rectangles sized by value. Packs a lot of parts into a fixed frame.	Chart.js	tree
Sunburst	Radial partition — depth outward, share by angle. Reads a deep tree in one glance.	D3	tree
Circle Pack	Circles packed by size and tinted by group. Friendlier than a treemap, less precise.	D3	items
Icicle	A sunburst unrolled. Depth runs one way, share the other — easier to label than the radial form.	D3	tree
Dendrogram	The tree drawn as a tree. Shows structure and depth rather than the size of each part.	D3	tree
Voronoi Diagram	Space divided by nearest point. Every cell is the territory closest to its seed.	D3	places
Radial Dendrogram	The tree laid around a circle, leaves on the circumference. Fits a deeper hierarchy than a page is wide.	D3	tree

Network

6 charts.

Chart	What it is for	Engine	Data
Network Graph	Force-directed nodes and edges. Good for structure and clustering, poor for anything precise.	D3	edges
Arc Diagram	Nodes on one line, links as arcs above it. Trades the freedom of a force layout for a readable order.	D3	edges
Adjacency Matrix	The same graph as a grid. Unreadable for paths, but far better than a hairball for dense networks.	Canvas 2D	edges
Parallel Sets	Categorical flow across several dimensions. A Sankey for attributes rather than quantities.	Canvas 2D	dimensions
Venn Diagram	Overlapping sets. Honest for two or three; past that the geometry stops being able to tell the truth.	Canvas 2D	items
Non-ribbon Chord	Nodes on a circle joined by thin curves instead of ribbons. Keeps forty connections countable where a chord diagram would go solid.	D3	edges

Flow

6 charts.

Chart	What it is for	Engine	Data
Sankey	Quantities moving between stages. Ribbon width is the volume; the drop-offs are the story.	Chart.js	links
Chord Diagram	Symmetric flows between every pair. Ribbon thickness is the shared volume.	D3	links
Funnel	Stage-by-stage attrition. The taper is the drop-off; the side column is the honest number.	Canvas 2D	items
Marimekko	Column width is one measure, segment height another — market size against mix.	Canvas 2D	items
Stream Graph	A stacked area freed from the baseline. Reads total volume and rhythm, not exact values.	D3	labelSeries
Alluvial Diagram	One population re-sorted stage by stage. Blocks are where everybody is now; ribbons are who moved where.	D3	links

Comparison

17 charts.

Chart	What it is for	Engine	Data
Word Cloud	Words sized by their count. Fast to read the top few terms, and honest about nothing below them.	Canvas 2D	items
Tally Chart	Counts as five-bar gates, the way they were written down in the field. Exact for small numbers, useless for large ones.	Canvas 2D	items
Slope Chart	Two points per item joined by a line. Rank change and direction, nothing else.	Canvas 2D	pairs
Candlestick	Open, high, low and close in one mark. Body is the move, wick is the range.	Canvas 2D	ohlc
Parallel Coordinates	One line per item crossing several axes. Crossings mean trade-offs.	D3	rowSeries
Bump Chart	Rank over time on a reversed axis, so first place sits on top and crossings are overtakes.	Chart.js	labelSeries
Bar + Line	A magnitude on the left axis and a rate on the right. Two units, one frame.	Chart.js	labelSeries
Stacked Bar + Total Line	Composition in the stack, total on the line — the figure the stack makes hard to read.	Chart.js	labelSeries
Dumbbell	Two dots joined by a rule. The gap is the point, which is exactly what a paired bar chart buries.	Canvas 2D	pairs
Pareto Chart	Sorted bars with a cumulative curve. Finds the few causes behind most of the effect.	Chart.js	items
Span Chart	Range only — the minimum and maximum, with the body of the bar removed. Emphasises spread, not size.	Canvas 2D	pairs
Bar with Error Bars	Means with their uncertainty drawn on. A bar without this is a claim without a confidence interval.	Canvas 2D	items
Timeline	Priestley’s chart: one bar per span of time, stacked into lanes. Duration and overlap at a glance.	Canvas 2D	items
Calendar Heatmap	A year as a grid of weeks. Made famous by contribution graphs; good for any daily count.	Canvas 2D	labelValue
Cycle Plot	A small trend line inside each season, against that season's own mean. Separates "Julys are high" from "Julys are rising".	Canvas 2D	labelSeries
Dot Plot	One row per category, a dot per series on a shared axis. Reads more series than a grouped bar without the clutter of bars.	Canvas 2D	labelSeries
Time Table	A schedule grid: rows against time slots, filled only where something happens. The empty cells are half the message.	Canvas 2D	matrix

Finance

4 charts.

Chart	What it is for	Engine	Data
OHLC Bar	The candlestick’s older sibling: a vertical range with ticks left for open and right for close.	Canvas 2D	ohlc
Renko	A brick is laid only when price moves a fixed amount. Time disappears; noise goes with it.	Canvas 2D	ohlc
Point & Figure	Columns of X and O. A new column starts only when price reverses by a set number of boxes.	Canvas 2D	ohlc
Kagi	A line that thickens on a break to a new high and thins on a break to a new low. Direction, not duration.	Canvas 2D	ohlc

Geo

8 charts.

Chart	What it is for	Engine	Data
Choropleth Map	Regions shaded by value. Only ever for rates and ratios — shade a raw count and you have drawn a population map.	D3	regions
Globe	The world as a sphere, shaded by value. Drag to spin it. Honest 3D — no extrusion, no occlusion, no distorted areas.	D3	regions
City Map	One country, with a value at each city. The common case when the statistic you have is local, not national.	D3	places
Proportional Symbol Map	Circles sized by value at each location. The right chart for counts, where a choropleth would mislead.	D3	places
Dot Density Map	One dot per n units, scattered inside each region. Shows where things are without shading whole areas.	D3	regions
Flow Map	Movement between places, drawn as arcs whose width is the volume. Origin, destination and size in one mark.	D3	places
Tile Grid Map	Every region an equal square in roughly the right place. Gives Luxembourg the same room as France — deliberately.	Canvas 2D	items
Cartogram (Non-contiguous)	Each country shrunk about its own centre in proportion to its value. Keeps the shapes; abandons the adjacency.	D3	regions

KPI & Micro

3 charts.

Chart	What it is for	Engine	Data
Sparkline	Tufte’s word-sized graphic: shape only, no axes. Meant to sit inline with text or in a table cell.	Canvas 2D	rowSeries
Bullet Chart	Stephen Few’s replacement for the dashboard gauge: actual, target and qualitative bands in one row.	Canvas 2D	items
Radial Bar	Bars bent into concentric arcs. Compact and popular, though the outer ring always looks longer than it is.	Canvas 2D	items

Custom Engine

5 charts.

Chart	What it is for	Engine	Data
Line — Custom Engine	The same line chart with no Chart.js on the page. Canvas, DPR-aware, ~12KB of engine.	OpenCharts	labelSeries
Area — Custom Engine	The engine has no separate area class — it is the line chart with the fill switched on.	OpenCharts	labelSeries
Bar — Custom Engine	Grouped, stacked or horizontal from one config key, drawn straight to canvas.	OpenCharts	labelSeries
Pie / Doughnut — Custom Engine	One class covers both, with a centre-text slot the doughnut hole was made for.	OpenCharts	items
Scatter — Custom Engine	Points, optional bubble sizing, and a least-squares trend line the engine computes itself.	OpenCharts	xyGroups

---

Generated from the registry by tools/build-wiki.mjs. Do not edit by hand — regenerate.