← ClaudeAtlas

chart-designlisted

Design honest, accessible charts of quantitative data as inline SVG — bar and column charts, line and time series, limit ledgers, distributions, scatter plots, and small multiples. Use when visualizing measured values, choosing a chart type, picking or fixing chart colors, building a categorical palette from design tokens, setting axes and scales, labelling series, or making an existing chart readable in grayscale and in print. Do not use for diagrams of structure or process such as architecture or flows (use diagram-design), for the surrounding report narrative and metric semantics (use analytical-document-design), or for interactive dashboards that require a client-side charting library.
Avinava/document-design-system · ★ 2 · Web & Frontend · score 73
Install: claude install-skill Avinava/document-design-system
# Chart Design A chart is an argument about numbers. Its job is to make one comparison faster than a table would — and to make the wrong reading hard. Choose a chart only when it reveals a relationship faster than a table. A chart of four values is slower to read than four labelled numbers, because the reader has to decode the encoding before they get the data. ## The honesty rules These are not stylistic. Breaking them changes what the reader concludes. - **Bar and column charts start at zero.** A truncated bar axis multiplies apparent differences by an arbitrary factor. If small differences matter, use a line chart, a dot plot, or state the values. - **Line charts may use a non-zero axis** — they encode position, not length — but the axis must be labelled and the truncation visible. - **Area encodes one quantity, not two.** Doubling both width and height quadruples the area for a doubled value. - **Percentages name their denominator**, near the chart, not buried in a footnote. - **Equal visual weight means equal comparability.** Do not put two different units on one axis. - **Time on an axis is continuous.** Missing months appear as zero or as a marked gap, never by silently closing up. - **State when a scale is logarithmic**, in the axis label, not the caption. - **Categories are categories, even when they look like numbers.** Years, quarters, ports, and version numbers are labels, not measurements. Put them on a categorical (band) scale. Left on a continuous scale, `