Stats & Numbers
Trend Line Chart Card
A headline metric paired with a small multi-point trend line, sized to drop straight into a dashboard grid cell — MRR, active users, response time over time. Carries first/last axis labels and an optional second comparison series (this period vs last), with a legend and hidden data table so the trend is never colour-only.
$ velocityx add trend-line-chart-cardBuilt for astro.
Full docs for Trend Line Chart Card →
Needs a licence key —
subscribe here, then
velocityx loginonce.
| Period | Monthly recurring revenue |
|---|---|
| Apr | 32 |
| May | 35 |
| Jun | 34 |
| Jul | 39 |
| Aug | 41 |
| Sep | 44 |
| Oct | 48 |
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | No | 'Monthly recurring revenue' | |
| valueText | string | No | '$48.2k' | Headline figure shown above the chart. |
| deltaText | string | No | '+12.4% vs last period' | |
| deltaDirection | 'up' | 'down' | 'flat' | No | 'up' | |
| points | number[] | No | [32, 35, 34, 39, 41, 44, 48] | Single-series shorthand — ignored if `series` is passed. |
| xLabels | string[] | No | ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'] | First/last (or evenly-spaced) x-axis hints, same length as points. |
| series | TrendSeries[] | No | Two-series form, for period-over-period comparisons. | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/trend-line-chart-card/TrendLineChartCard.astroUsing the Trend Line Chart Card component
Install it with velocityx add trend-line-chart-card.
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