Charts
Animated chart patterns in the Lumen palette (violet, amber, cyan on white). Synthetic data, hover and keyboard readouts, reduced-motion support, Ready/Loading/Empty states.
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
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.
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 |
Conversion funnel (Sankey)
Multi-stage conversion flow with drop-offs, date ranges, play/pause and keyboard focus. It inherits this template's colors and works with synthetic data. Replace the stage counts with your own source of truth.
Conversion funnel 20,400 trials
Where new trials convert or drop off. Sample data, local interactions only.
UpgradedDropped offParticle density follows trial volume. Fictitious data, no analytics service connected.