Repository navigation
Reading a Chart
Choosing a chart is not a neutral act. Each one makes something easy to see and something else easy to miss, and the second half is usually the part left out.
So every chart below gets two lines: how to read it, and what to watch — the way that particular chart misleads. The same text appears in the studio beside the chart itself.
Jump to: Line & Area · Bar · Deviation · Part to Whole · Radar · Scatter · Distribution · Hierarchy · Network · Flow · Comparison · Finance · Geo · KPI & Micro · Custom Engine
Reading it. Follow the line left to right. Height is the value; the slope between two points is the rate of change.
Watch for. If the vertical axis does not start at zero, a small change can look dramatic. Check the axis before trusting the shape.
Reading it. Compare the shapes of the lines, not their exact heights. Crossings mark where one series overtook another.
Watch for. Beyond four or five lines they become a tangle. Colour alone stops distinguishing them.
Reading it. Flat runs are periods where the value held; the vertical jumps are the moments it changed.
Watch for. The step implies the value was constant between readings. That is true for prices and tiers, false for anything sampled.
Reading it. Each line holds its value until it steps. Compare where the steps fall, not how steep they are.
Watch for. Overlapping flat runs can hide one line completely behind another.
Reading it. The line is the value; the filled area beneath implies a total accumulated up to that point.
Watch for. Fill suggests a quantity that adds up. Use it for volumes, not for rates, ratios or temperatures.
Reading it. Each band is one series; the top edge is the total. Band thickness at any point is that series’ contribution.
Watch for. Only the bottom band sits on a flat baseline. The ones above ride on the bands below, so their shapes are hard to judge.
Reading it. The central line is the estimate; the shaded band is the range around it. A wider band means less certainty.
Watch for. The band is a range, not a guarantee. Values outside it are possible, just less likely.
Reading it. Every column fills the full height, so you are reading share, not amount.
Watch for. A band can grow here while the underlying number shrinks — the total is invisible by design.
Reading it. Discrete states that hold and then change, with the space beneath filled to emphasise level.
Watch for. Same caution as any stepped line: it asserts the value was constant between changes.
Reading it. Solid line is what happened; the dashed line and widening bands are projection. Wider means further ahead and less certain.
Watch for. The centre of the fan is not a promise. Read the width as honesty about what is unknown.
Reading it. Each row is one series, folded into colour bands so it fits in a quarter of the height. Darker means further from the baseline.
Watch for. Deliberately trades precision for density. Good for spotting when something happened across many series, poor for reading a value.
Reading it. Time coils outward — each full turn is one cycle. Compare the same angular position across turns to see the same point in successive cycles.
Watch for. Distance from the centre confounds time and value. Only use it when the cycle itself is the point.
Reading it. Distance from the centre is the value; going clockwise walks one full cycle. The line closes because the cycle does.
Watch for. The same value covers more area further out, so the outer rings look bigger than they are. Only use it where the wrap-around actually means something.
Reading it. Compare bar heights. Because they share a baseline, ratios between them are read reliably.
Watch for. The baseline must be zero. Truncate it and a 3% difference can look like 50%.
Reading it. Total height is the whole; each segment is one part. The bottom segment and the total are the two things you can read accurately.
Watch for. Middle segments float on shifting baselines, so comparing them across columns is unreliable.
Reading it. Compare bar lengths. Rotating frees up room for long category names and makes ranking read top-down.
Watch for. Sort deliberately. Alphabetical order hides the ranking that the chart exists to show.
Reading it. Every bar is the same length, so you are comparing composition between groups, not size.
Watch for. Group totals are invisible. A group of 10 and a group of 10,000 look identical.
Reading it. Bars grow either side of a zero line. Direction is the sign, length is the magnitude.
Watch for. Check where zero sits. An off-centre baseline makes one direction look systematically larger.
Reading it. Each bar spans from its start to its end, so position matters as much as length. Length is duration.
Watch for. Bars that do not touch the axis are easy to misread as small values rather than late starts.
Reading it. Read left to right as a running total. Grey bars are totals; coloured ones are the changes between them.
Watch for. Floating bars encode a change, not a value. Their height is the size of the movement.
Reading it. Two groups mirrored across a shared category axis. Compare the two sides at each row, and the profile top to bottom.
Watch for. The left side is plotted as negative numbers. Read the axis labels as absolute values.
Reading it. The dot is the value; the stem only leads the eye to it. Read dot position exactly as you would a bar end.
Watch for. Less visual weight than a bar, so small differences are easier to miss.
Reading it. The line against a baseline, filled in two colours. Colour tells you the sign; the area shows how long and how far it stayed there.
Watch for. A large area is a sustained deviation, not necessarily a large one. Read depth and duration separately.
Reading it. Responses stack outward from a neutral centre. Length to the right is agreement, to the left disagreement.
Watch for. The neutral band is split across the centre, so the midpoint is a convention rather than a measurement.
Reading it. Two contrasting groups either side of a central spine, with categories down the middle.
Watch for. The two sides use separate scales from the centre outward. Compare within a side, cautiously across.
Reading it. Each slice is a share of one total. Angle carries the value.
Watch for. People judge angles poorly. Past about five slices, or when two are close, a bar chart tells the truth better.
Reading it. Same as a pie — angle is the value. The hole is free space for a headline number.
Watch for. Removing the centre makes the angle harder to judge, not easier. The hole is decoration, not information.
Reading it. One value against its maximum. The filled sweep is the proportion reached.
Watch for. A gauge spends a lot of space on a single number. A bullet chart shows the same thing with context.
Reading it. Every segment has the same angle; the radius carries the value.
Watch for. Area grows with the square of radius, so a value twice as large looks four times as big unless the scale corrects for it.
Reading it. Radius is scaled by square root so that segment area is proportional to the value — that is the correction the polar area chart lacks.
Watch for. Still radial, so comparing non-adjacent segments is hard. Best for cyclical data where position means something.
Reading it. Each square is one unit, usually one percent. Count the squares of a colour to read its share.
Watch for. Counting is accurate but slow. Good for a handful of categories, poor for many.
Reading it. Count the dots. Each one is the same number of units, so a block twice as long is twice as much.
Watch for. Past a few hundred dots nobody counts them and it becomes a bar chart with extra steps. Raise the units-per-dot instead.
Reading it. Area, not width, carries the value — the shapes are scaled by square root so this holds.
Watch for. Area comparisons are approximate at best. Use it for orders of magnitude, not for precise ratios.
Reading it. Each column grows outward from the inner circle. Longer is more.
Watch for. The columns fan out, so an outer bar is drawn wider than an inner one of the same value. Comparing two columns on opposite sides is guesswork.
Reading it. Area is the value and the figures sit one inside another, so a part is literally contained by its whole.
Watch for. People read the width, not the area, and so overestimate the small ones. Nesting also implies containment — do not nest categories that are not actually subsets.
Reading it. Each icon is a fixed number of units. Count icons; a part-icon is a fraction of one.
Watch for. Isotype’s rule: repeat the symbol, never scale it. A doubled-in-size icon reads as four times the value.
Reading it. Each spoke is a dimension, distance from centre is the score. Read the overall silhouette.
Watch for. The enclosed area depends on the arbitrary order of the axes. Reorder the spokes and the shape changes with no change in data.
Reading it. Overlaid profiles. Look for spokes where the shapes separate — those are the real differences.
Watch for. Three profiles is the practical limit before the overlaps become unreadable.
Reading it. A single strongly filled profile, when the silhouette is the whole message.
Watch for. Fill makes the arbitrary-axis-order problem more visually convincing, not less.
Reading it. Each dot is one item, placed by two measures. Read the cloud — its slope, spread and any outliers.
Watch for. A visible pattern is correlation, not cause. Overlapping dots also hide density; watch for overplotting.
Reading it. Same as a scatter, with colour marking group membership. Look for whether the groups actually separate.
Watch for. Colour makes groups look more distinct than the numbers may justify.
Reading it. Position gives two measures, bubble area gives a third.
Watch for. Area is judged poorly and large bubbles hide small ones behind them. Keep the third measure secondary.
Reading it. Each hexagon covers a patch of the plane; its shade is how many points landed inside. Dark means crowded.
Watch for. The hexagon size decides the picture. Make them large enough and every cloud looks like one smooth blob.
Reading it. Read one row at a time: the variable named on the left is the vertical axis in every panel across it. Look for panels with a slope.
Watch for. With six variables this is thirty panels, and some will look correlated by chance alone. Treat it as a place to find a question, not an answer.
Reading it. Bands are lines of equal density, like contours on a map. Tightly packed bands are a steep climb into a peak.
Watch for. The bandwidth is a choice, not a measurement. Too high invents one hill where there were two; too low turns every point into its own island.
Reading it. A scatter whose points are joined in time order. Follow the path to see how the two measures moved together.
Watch for. Loops and crossings are common and easy to misread. Mark the start and end clearly.
Reading it. A scatter cut into four named zones by two thresholds. The label of a zone is the recommendation.
Watch for. The thresholds are a judgement, not a measurement. Move them and items change category without any change in data.
Reading it. Bar height is how many observations fell in that range. The overall shape is the distribution.
Watch for. Bin width is an editorial choice, not a fact. Change it and the same data can look bimodal or smooth.
Reading it. The box spans the middle half of the data, the line inside is the median, whiskers reach most of the rest, and dots are outliers.
Watch for. Hides shape completely. Two very different distributions can produce identical boxes — a violin or beeswarm would show the difference.
Reading it. Width at any height is how many observations sit at that value. Bulges are common values.
Watch for. The smoothing bandwidth is a choice. Too smooth hides real structure; too rough invents it.
Reading it. Colour intensity is the value at the intersection of a row and a column.
Watch for. Colour is read poorly for exact values. Good for spotting patterns and hot spots, poor for reading numbers.
Reading it. A smoothed histogram — curve height is relative frequency. Compare where each group’s mass sits.
Watch for. No bin-width argument, but bandwidth does exactly the same job. Area under each curve is one, so tall does not mean more data.
Reading it. One density curve per row, overlapping. Read the horizontal shift between rows as the change.
Watch for. Overlap is chosen for looks. Too much and rows hide each other; the ordering also drives the impression.
Reading it. Every point answers "what share of the data is at or below this value?" The median is where the curve crosses 50%.
Watch for. Less intuitive than a histogram, but it involves no binning choice, so nothing is hidden by it.
Reading it. Every observation is one dot, nudged sideways so none hide. Density is visible, and so is the sample size.
Watch for. The sideways offset carries no meaning — only position along the value axis does.
Reading it. One thin tick per observation on a shared scale. Clusters and gaps are the point.
Watch for. Ticks overlap in dense regions, so it understates how crowded the busiest areas are.
Reading it. Bins wrapped around a circle — the right choice when the variable itself is angular, like direction or time of day.
Watch for. Segment area grows with radius, exaggerating the outer values unless scaled for it.
Reading it. The stem is the leading digits, each leaf one observation sharing it. The length of a row is a bar; the digits in it are the actual values.
Watch for. It only works while the leaves fit on one line. A large batch runs off the edge, and the stem size has the same effect a bin width does on a histogram.
Reading it. Rectangle area is the value; nesting and colour show the grouping.
Watch for. Long thin rectangles are hard to compare against square ones of the same area. Ranking is reliable, ratios less so.
Reading it. Rings are levels of the hierarchy, moving outward. Angle is share of the parent.
Watch for. Outer rings have more room at the same angle, which makes deep levels look more significant.
Reading it. Circle area is the value; colour marks the group. Packing is decorative, not meaningful.
Watch for. Position carries no information at all here, which is easy to forget when clusters appear.
Reading it. The same partition as a sunburst, unrolled. Depth runs one way, share the other.
Watch for. Easier to label than a sunburst but takes more space for the same information.
Reading it. Structure and depth of a tree, not the size of its parts. Branch position shows what groups with what.
Watch for. Says nothing about magnitude — a leaf worth 1 and a leaf worth 1,000 look the same.
Reading it. Every cell is the territory closest to its seed point. Cell size shows how isolated a point is.
Watch for. Cells are about distance, not about any value at the point. Big cell means remote, not important.
Reading it. The root is at the centre and depth runs outward; every leaf sits on the rim. Follow a branch out to see what is under it.
Watch for. Angle carries no meaning, so two leaves near each other on the rim may be nowhere near each other in the tree. Only the connecting lines say what belongs together.
Reading it. Nodes and the links between them. Clusters and highly-connected hubs are what to look for.
Watch for. Position is decided by a layout algorithm, not by the data. Two nodes drawn close together may have nothing in common.
Reading it. Nodes sit on one line; arcs join the connected ones. Arc span shows how far apart connected nodes are in the ordering.
Watch for. The node ordering drives the whole impression — reorder and the picture changes completely.
Reading it. A filled cell means a link between that row and column. Blocks along the diagonal are clusters.
Watch for. Excellent for dense networks, useless for tracing a path through them.
Reading it. Ribbon thickness is how many items share that combination of categories across the dimensions.
Watch for. Ribbon crossings are a layout artefact and carry no meaning.
Reading it. Overlapping regions are items belonging to more than one set. Numbers give each region’s size.
Watch for. Region areas are rarely proportional to their counts. Read the labels, not the geometry.
Reading it. Each curve is one connection between two nodes on the rim. Node size is how many connections it has.
Watch for. The curves have no thickness, so this says who is connected and nothing about how much. Bundling makes the middle dense on purpose — count at the rim, not the centre.
Reading it. Ribbon width is the quantity flowing. Follow a ribbon left to right to trace where volume goes.
Watch for. Node vertical order is chosen to reduce crossings, so height carries no meaning.
Reading it. Arc length around the circle is a group’s total; ribbon thickness is the volume shared between two groups.
Watch for. Beautiful and dense, but reading any single value precisely is difficult.
Reading it. Each stage is narrower than the last. The taper is drop-off; the side column gives the honest percentage.
Watch for. The shape exaggerates. A gentle narrowing can be a severe loss — read the numbers, not the slope.
Reading it. Column width is one measure and segment height another, so rectangle area is the product of the two.
Watch for. Two varying dimensions at once is a lot to ask of a reader. Comparing non-adjacent rectangles is unreliable.
Reading it. A stacked area freed from its baseline. Band thickness is the value; total thickness is the total.
Watch for. No flat baseline anywhere, so individual values are hard to read. It shows rhythm and composition, not amounts.
Reading it. Block height is how many are in that state; ribbon thickness is how many moved between two states. Follow one ribbon left to right to trace a group.
Watch for. The vertical order of blocks is chosen to reduce crossings, not to rank them. Reading it as an ordering is the usual mistake.
Reading it. Bigger words occur more often. Read the largest few and stop — that is all this chart reliably says.
Watch for. Area, not length, encodes the count, and people judge area badly. Position and colour mean nothing at all here, and a long word looks larger than a short one of the same count.
Reading it. Marks come in gates of five, the fifth struck across the other four. Count the gates, then the leftovers.
Watch for. This is for counts you can still see — twenty, not two hundred. Beyond that the gates blur and a bar is more honest.
Reading it. Two points per item joined by a line. Slope direction is the change; crossings are overtakes.
Watch for. Only shows the endpoints. Anything that happened in between is invisible.
Reading it. The body spans open to close, the wick shows the high and low. Colour tells you which way it moved.
Watch for. Colour convention varies by region — check which way round it is before reading.
Reading it. One line per item crossing several axes. Lines that cross between two axes indicate a trade-off between them.
Watch for. Axis order determines which trade-offs are visible. Each axis has its own scale.
Reading it. Rank over time on a reversed axis, so first place is at the top. Crossings are overtakes.
Watch for. Shows rank, not value. A team can hold first place while collapsing in absolute terms.
Reading it. Bars use the left axis, the line uses the right. They are different units deliberately.
Watch for. Two axes can be scaled to imply any relationship you like. Treat apparent correlation with suspicion.
Reading it. The stack shows composition, the line shows the total that the stack makes hard to read.
Watch for. The line and the stack top are the same quantity — check they actually agree.
Reading it. Two dots joined by a rule. The gap between them is the point; dot position gives each value.
Watch for. Sorting by gap or by endpoint tells quite different stories. Note which is in use.
Reading it. Bars sorted descending with a cumulative curve. Where the curve crosses your threshold marks the vital few.
Watch for. The 80/20 split is a rule of thumb, not a law. The threshold line is a convention.
Reading it. Only the minimum and maximum, with the middle removed. Emphasises spread rather than size.
Watch for. Says nothing about what happens between the ends — the distribution could be anything.
Reading it. Bar height is the mean; the whisker is the uncertainty around it. Overlapping whiskers suggest the difference may not be real.
Watch for. Always check what the whisker represents — standard deviation, standard error and a confidence interval are very different.
Reading it. Each bar spans a period, stacked into lanes. Overlapping lanes show what ran concurrently.
Watch for. Lane assignment is usually for packing, not meaning. Vertical position rarely signifies anything.
Reading it. A year as a grid of weeks, one square per day, coloured by that day’s value.
Watch for. Colour steps compress the scale, so a very busy day and a moderately busy one can look identical.
Reading it. Each little line is one season’s trend across the years; the flat line through it is that season’s mean. Compare the means across seasons, and the slopes within them.
Watch for. It answers two questions at once and they can disagree — a season can be the highest and the only one falling. Read the level and the slope separately.
Reading it. Every row shares one horizontal axis; each dot is one series. The spread within a row is the gap between series.
Watch for. The axis rarely starts at zero here, which is fine for comparing positions and wrong for reading ratios off it.
Reading it. Rows are things, columns are slots, a block means something is scheduled. Block size is the value where that is switched on.
Watch for. The empty cells carry as much of the message as the full ones. A grid that looks sparse because the data is missing reads identically to one that is genuinely free.
Reading it. A vertical range with a tick left for the open and right for the close. Colour shows direction.
Watch for. Thinner than a candlestick and harder to read at a glance, but it uses less ink for the same information.
Reading it. A brick is drawn only when price moves a fixed amount. The horizontal axis is not time.
Watch for. Filtering out small moves also removes when they happened. Never read the x axis as a clock.
Reading it. Columns of X for rising and O for falling. A new column starts only after a reversal of several boxes.
Watch for. Time is entirely absent. A single column can represent one day or one year.
Reading it. The line thickens after a break to a new high and thins after a break to a new low. Thickness is the trend signal.
Watch for. Like the other three, this is price-driven rather than time-driven. Horizontal distance means nothing.
Reading it. Regions shaded by value, with the key giving the bands.
Watch for. Only ever for rates and ratios. Shade a raw count and you have mostly drawn a population map — big regions dominate regardless.
Reading it. The same shading on a sphere. Drag to rotate. Countries facing you are the ones being shown.
Watch for. Half the world is hidden at any moment, and regions near the edge are foreshortened.
Reading it. One country, with a circle at each city sized by its value. Area carries the number, position is the real location.
Watch for. Cities cluster, so circles overlap and hide each other. Longitude comes before latitude in the data — swapping them puts everything in the wrong hemisphere.
Reading it. Circle area at each location is the value. The right choice for counts, where a choropleth would mislead.
Watch for. Symbols overlap in dense areas, hiding smaller ones behind larger.
Reading it. Each dot is a fixed number of units, scattered within its region. Dot density is the value.
Watch for. Dot positions within a region are random. A dot does not mark an actual location.
Reading it. Arcs connect origin to destination, with width showing volume.
Watch for. Arc curvature is decorative — it is not a route. Crossings mean nothing.
Reading it. Every region gets an identical square, positioned roughly geographically.
Watch for. Deliberately abandons real geography so small regions stay visible. Do not read distance or size from it.
Reading it. Each country is scaled about its own centre in proportion to its value, keeping its recognisable shape.
Watch for. Adjacency is destroyed — the gaps between shapes are an artefact, not water.
Reading it. Shape only — no axes, no gridlines. Read the direction and the shape of the trend, and take the number at the right as the current value.
Watch for. By design you cannot read a value off it. If the exact number matters, this is the wrong chart.
Reading it. The bar is the actual value, the vertical marker is the target, and the background bands are qualitative ranges.
Watch for. Designed as a replacement for the dashboard gauge — it carries far more information in far less space.
Reading it. Each ring is one item; the filled arc is its share of the maximum.
Watch for. Outer rings are physically longer, so equal values look larger further out. Popular, but a plain bar chart is more honest.
Reading it. Reads exactly like any line chart. The difference is under the hood — no Chart.js, just the bundled engine.
Watch for. Same caution as any line chart: check whether the value axis starts at zero.
Reading it. A line chart with the fill switched on. There is no separate area class in the engine.
Watch for. Fill implies accumulation. Appropriate for volumes, misleading for rates.
Reading it. Grouped, stacked or horizontal from one setting. Compare bar lengths against the shared baseline.
Watch for. As with any bar chart, the baseline must be zero for the comparison to hold.
Reading it. Angle is the share. The doughnut hole can carry a headline figure.
Watch for. Angles are judged poorly; keep the slice count low.
Reading it. Two measures per point, with an optional least-squares trend line the engine computes itself.
Watch for. A trend line will be drawn through any cloud, including one with no real relationship.
Generated from the registry by tools/build-wiki.mjs. Do not edit by hand — regenerate.