Chart catalog

Seventeen framework-agnostic charts. Each page has an example, usage across every framework, and an LLM-context panel.

• Line Chart - Trends · Trends over time across one or many series - with optional gap detection, an opt-in canvas renderer (LTTB-decimated for big data), and single-point guide lines.
• Fan Chart - Trends · Forecast · A forecast fan: history, a dashed forecast median, and nested confidence bands that widen with the horizon (composed from Line + Range).
• Area Chart - Composition · Part-to-whole over time: how each component’s share of a stacked total shifts.
• Scatter Plot - Correlation · Relationship between two numeric variables; bubble size encodes a third.
• Range Chart - Trends · Min-max bands per series - forecasts, confidence intervals, or observed ranges over time.
• Ribbon Chart - Composition · Stacked columns per period, linked by connector ribbons that trace each category across time.
• Radar Chart - Comparison · Compare several entities across a shared set of axes at a glance (a polygon per entity).
• Vertical Stack Bar - Composition · Stacked vertical bars per category, with an explicit missing-data marker guard for sparse datasets.
• Comparable Horizontal Bar - Comparison · Two overlaid horizontal sub-bars per label - a “based” vs “compared” value.
• Dual Horizontal Bar (Tornado) - Comparison · Diverging bars from a centre line - value1 right, value2 left (population pyramids, tornado charts).
• Bar-Bell - Composition · Cumulative horizontal segments per row with end-cap circles marking each step.
• Gap Chart - Comparison · Two values per label joined by a gap bar - emphasises the difference between them.
• Treemap - Composition · Hierarchical tiles sized by value, each optionally split into two parts (e.g. realized vs untapped) - with a mobile-friendly stack layout.
• Pie / Donut - Composition · Slices sized by share of a whole, with per-slice % labels; set innerRadiusRatio for a donut.
• Bubble - Composition · Circles sized by value, pulled into a cluster by gravity, each optionally split into a realized core and an untapped ring.
• Sankey - Flow · Flows between nodes laid out in columns, with band thickness proportional to the flow value (built on d3-sankey).
• Fountain (Jet d'Eau) - Comparison · Apex height = value, the blooming plume = uncertainty. Categorical x = snapshot/comparison of KPIs; temporal or numeric x = trend with optional forecast jets (best for ~5-12 periods).