Graphs
All charts
Trends over time
- Spline line · single / dual
- Gradient spline area
- Step progression
- Stream wave
- Min/max range band
- Pill bars + spline
- Dual-axis · revenue / occupancy
- Financial candlesticks
- Telemetry sparklines
- Series filter + bars + trend
Comparison
- Pill bars · column / row
- Stacked tones
- Dumbbell · plan / actual
- Bullet targets
- Waterfall steps
- Polar radial pillars
- Radar web
- Grouped radial arcs
Parts of a whole
Distribution and relationships
Activity and time grids
- Activity heatmap · Emerald
- Activity heatmap · Sky
- Activity heatmap · Violet
- Dot-matrix heatmap
- Day × hour · studio occupancy
- Cohort · member retention
- Gantt · studio timeline
KPIs and progress
Flows and funnels
Chart gallery
Includes 30 patterns adapted from the Amicro reference, plus eight dashboard patterns (histogram, Gantt, day/hour heatmap, cohort retention, box plot, dual-axis combo, dumbbell and sunburst). Each card has synthetic data, hover/focus readouts, keyboard buttons and reduced-motion support. Dataset A/B updates time-series charts; allocation, target and flow examples use their own labeled fixtures. Existing chart examples remain below.
Hover or focus a mark to read its value. Use the readout buttons for a keyboard and touch readout. Motion follows your reduced-motion setting. These are Vue/SVG demos, not the reference's React package.
Activity heatmap · Emerald
Calendar-style grid of daily activity. Darker cells mean more events; use it for habits and streaks.
Activity heatmap · Sky
The same activity grid in a cool tone, for a second metric on the same page.
Activity heatmap · Violet
The activity grid in a violet tone, for secondary or comparison data.
Spline line · single / dual
Smooth trend over time. Switch to dual to compare two series on one scale.
Pill bars · column / row
Rounded bars that grow from zero. Flip between columns and rows for long labels.
Gradient spline area
Trend with a soft gradient fill under the line, good for volume over time.
Rounded donut
Share of a whole with a total in the middle. Keep it to five slices or fewer.
Pill bars + spline
Bars for totals with a line for the trend, sharing one axis.
Scatter matrix
Dots on two axes to spot clusters and outliers between two measures.
Financial candlesticks
Open, high, low and close for each period, as used in price charts.
KPI with sparkline
One headline number with its change and a small trend line behind it.
Tier pyramid
Stacked tiers from base to top, for plans, levels or rankings.
Grouped radial arcs
Grouped arcs on a circle so you can compare a few goals at a glance.
Speedometer
Dial with a needle that sweeps to the current value against a range.
Bullet targets
A value against its target, with bands for poor, fair and good.
Sankey flow
Flow between stages. Band width shows how much moves from one step to the next.
Step progression
Value that holds and then jumps, such as plan tiers or inventory levels.
Stacked tones
Bars split into parts so you can see the total and what it is made of.
Radar web
Several scores on one web, to compare the shape of two profiles.
Concentric progress rings
Concentric progress rings, one per goal, that fill to their percent.
Stage funnel
Stages that narrow as people drop off, with the share kept at each step.
Dot-matrix heatmap
Grid of dots whose fill shows intensity, a lighter alternative to a heatmap.
Telemetry sparklines
Rows of tiny live-style sparklines for many signals at once.
Bubble clusters
Bubbles sized by a third value, to compare three measures in one view.
Tile treemap
Nested tiles sized by value, for parts of a budget or catalog.
Stream wave
Flowing layered wave that shows how categories change over time.
Arc meter
Half-circle meter that fills to a single value.
Waterfall steps
Start, inflow, outflow and net, so you can see how a total was reached.
Polar radial pillars
Pillars radiating from a center, one per category.
Min/max range band
Band between a minimum and a maximum, with both edges drawn.
Histogram · attendance distribution
Counts per bucket to show how values are distributed.
Classes grouped into equal 10-attendee bins. Bar height = class count.
Gantt · studio timeline
Tasks as bars on a timeline, with start, length and overlap.
Coach shifts on a 06:00–22:00 timeline. Bar length = duration.
Day × hour · studio occupancy
Day by hour grid showing when things are busiest.
Rows = day, columns = hour. Darker cells = higher occupancy (0–100%).
Cohort · member retention
Retention by signup group, read left to right as time passes.
Signup month × months since signup. Blank future months are not zero.
Box plot · revenue spread
Median, quartiles and spread for each group.
Whiskers = min/max; box = Q1–Q3; line = median. Revenue in dollars.
Dual-axis · revenue / occupancy
Two measures with their own axes, one as bars and one as a line.
Bars use the left dollar axis; dashed line uses the right occupancy axis (%).
Dumbbell · plan / actual
Plan against actual for each item, joined by a line to show the gap.
Outlined dot = planned; filled dot = actual attendees.
Sunburst · expense hierarchy
Rings for each level of a hierarchy, such as expense categories.
Inner ring = category; outer ring = subcategory. Angle = share of total.
Integration notes
Import ChartGallery.vue for a demo or extract a single card into your application. Replace the synthetic arrays, label units, handle missing data, and use the Ready/Loading/Empty selector to preview chart states, and add error handling before live use. Sankey band width encodes flow; treemap tile area encodes share; waterfall bars encode signed deltas; candlesticks expose open/high/low/close in the readout. Charts should supplement, not replace, accessible data tables. The three colored activity grids are variants of one chart family.
Data visualization examples and a dependency graph for Lustro. All numbers below are synthetic samples, not live metrics. Switch between the sample series to see how the charts respond. Motion patterns explain when movement helps.
Series filter + bars + trend
Bars per month with a segmented filter ("All" sums the series). The trend is a least-squares line over complete months only, so the current month is left out, and it needs 3 or more months with data. A missing month shows a dash and no bar. Fictitious data. Motion replays when the filter changes and stops with reduced motion.
Rises about $8 per month (complete months only). Sep is the current month and is left out.
| Mar | $158 |
|---|---|
| Apr | $152 |
| May | $164 |
| Jun | $190 |
| Jul | $192 |
| Aug | $188 |
| Sep (current) | $136 |
Data charts
One dataset, many ways to read it. Labels and the data table remain available without color or animation.
Line
Track change over an ordered interval.
Area
Emphasize magnitude across time.
Column bar
Compare discrete periods.
Horizontal bar
Fit longer category names.
Stacked bar
Show total and contributing series.
Pie
A few shares of one whole.
Donut
Show proportions with a total in the center.
Scatter
Check the relationship between two values.
Sparkline
Fit a trend into a compact metric.
Radar
Compare a small set of normalized traits.
Heatmap
Scan variation across periods and categories.
Gauge ring
Show progress toward a defined target.
Histogram
Count numeric samples in equal-width bins.
Bubble
Size adds a third numeric variable.
Mixed: bar + line
Compare volume and trend on a shared scale.
Average + trend
Read a series against its mean and OLS slope.
Accessible data behind the examples
All sixteen examples above respond to the same North/South/West controls. Numbers are made up for this guide; they have no unit or business meaning. The table supplies exact values for readers who cannot or do not want to use the visual encoding.
| Period | Primary | Secondary |
|---|---|---|
| Jan | 35 | 20 |
| Feb | 48 | 24 |
| Mar | 41 | 29 |
| Apr | 61 | 28 |
| May | 56 | 37 |
| Jun | 74 | 34 |
| Jul | 68 | 42 |
Implementation notes
- Use SVG for small charts, where labels, focus targets and crisp resizing matter; use Canvas for thousands of marks and keep an HTML data alternative. The examples use SVG and CSS only, with no charting dependency.
- On real data, use a shared domain, meaningful units, empty/loading/error states, and provenance. A pie or donut needs one whole; a gauge needs a real target. For long time series, add zoom or aggregation rather than squeezing points. An average overlay is a horizontal reference at the mean; a trend overlay is a fitted line, not a smoothed path through every point.
- In production, give each mark a keyboard-accessible tooltip or synchronized data table. Do not rely on hue alone. Use a muted transition on series change, no perpetual chart animation, and turn transitions off under
prefers-reduced-motion.
Dependency graph
Plan → parallel work → tests → release
Layout patterns
| Shape | Algorithm | Use it for |
|---|---|---|
| Chain | Ordered vertical or horizontal sequence | A linear pipeline |
| Fan-out / fan-in | Tidy tree for the split; join at the shared successor | Parallel steps that converge |
| Layered DAG | Longest-path layers, barycenter ordering within each layer | Multiple dependencies and joins |
The demo above uses fixed normalized coordinates for five sample nodes, not an automatic layout engine. For arbitrary real graphs, topologically sort nodes, assign layers from dependencies, and apply crossing reduction. Keep cards and labels in HTML for focus, search, and screen readers when building a full dashboard.
Edge and particle recipe
Use a quadratic Bézier curve with a perpendicular offset near the midpoint, then evaluate the same curve at progress t ∈ [0,1] for each particle. A simple arc uses Q cx cy x2 y2; the animation uses about 700 ms per particle and 240 ms between events in the source prototype. Cap active particles (prototype cap: 220). Never spawn a particle for an unobserved event.
const x = (1-t)**2*x1 + 2*(1-t)*t*cx + t*t*x2
const y = (1-t)**2*y1 + 2*(1-t)*t*cy + t*t*y2State language
- Pending: quiet indigo/gray; no pulse.
- Running: amber pulse/breathing glow only while there is actual work.
- Succeeded: green; one transition ring, then settle.
- Failed: red, persistent label and repair action; never an endless urgent pulse.
- Blocked: muted edge or dashed line plus explicit reason.
Use one canvas animation loop, scale by devicePixelRatio, resize with ResizeObserver, and pause when offscreen in a production app. With prefers-reduced-motion, draw a static final frame, retaining labels and status. The illustration in this guide pauses the particles and pulse under that setting.
Source and scope
Adapted from two private motion prototypes created on September 29, 2026. This catalog intentionally uses generic sample labels; it does not connect to agents-ai or reveal task details. The prototype includes tidy-tree and layered-DAG implementations; this page documents their contract without claiming this five-node drawing is an automatic layout.
Looking for dashboards built from these charts? See the Reports example.