Stats & Numbers
Stacked Area Mini Chart
A compact dashboard-cell chart that stacks two or three series over time — traffic by channel, revenue by segment, tickets by priority — so composition and total trend read together without needing a full-width chart section.
$ velocityx add stacked-area-mini-chartBuilt for astro.
Full docs for Stacked Area Mini Chart →
Needs a licence key —
subscribe here, then
velocityx loginonce.
- Organic 24
- Paid 13
- Referral 6
| Period | Organic | Paid | Referral |
|---|---|---|---|
| Apr | 12 | 6 | 3 |
| May | 14 | 7 | 3 |
| Jun | 15 | 9 | 4 |
| Jul | 18 | 9 | 4 |
| Aug | 20 | 11 | 5 |
| Sep | 22 | 12 | 5 |
| Oct | 24 | 13 | 6 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | 'Sessions by channel' | |
| xLabels | string[] | No | ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'] | |
| series | StackedSeries[] | No | [ { name: 'Organic', points: [12, 14, 15, 18, 20, 22, 24] }, { name: 'Paid', points: [6, 7, 9, 9, 11, 12, 13] }, { name: 'Referral', points: [3, 3, 4, 4, 5, 5, 6] }, ] | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/stacked-area-mini-chart/StackedAreaMiniChart.astroUsing the Stacked Area Mini Chart component
Install it with velocityx add stacked-area-mini-chart.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Stats & Numbers.
Stat band whose numbers count up when the section scrolls into view, then settle. No runtime dependency — plain Astro plus a small inline observer. Honours prefers-reduced-motion by rendering final values immediately.
astroPuts two numbers on one shared scale and calls out the delta — the proof-point shape for 'we cut your load time' or 'conversion rate before vs. after' case studies. Ships a screen-reader summary alongside the bars, so the comparison reads correctly even without the visual.
astroOne headline figure sized to carry a section on its own, with a short annotation line underneath for context. Locale-safe number formatting (including compact '4.2M' notation) and a count-up that lands on the real value immediately for reduced-motion users.
astroThe compact way to show actual-vs-target on a scorecard row: a thin fill against a qualitative poor/satisfactory/good band, with a tick marking the target, so a whole KPI reads in the space a single number used to take. Values stay in text too, so it holds up for anyone who can't read the bar visually.
astro