Baseline chart
ProA value against a line you choose: area above and below take different colours, and you drag the line, or use the arrow keys, to ask what if the target were here.
pnpm dlx shadcn@latest add @caliper/baseline-chart| Period | Value | Against $0k |
|---|---|---|
| W1 | 21805 | 21805 |
| W2 | 20468 | 20468 |
| W3 | 11600 | 11600 |
| W4 | -2099 | -2099 |
| W5 | -16313 | -16313 |
| W6 | -26553 | -26553 |
| W7 | -29657 | -29657 |
| W8 | -24846 | -24846 |
| W9 | -13961 | -13961 |
| W10 | -820 | -820 |
| W11 | 10103 | 10103 |
| W12 | 15216 | 15216 |
| W13 | 13037 | 13037 |
| W14 | 4713 | 4713 |
| W15 | -6375 | -6375 |
| W16 | -15761 | -15761 |
| W17 | -19423 | -19423 |
| W18 | -15159 | -15159 |
| W19 | -3357 | -3357 |
| W20 | 13124 | 13124 |
| W21 | 29904 | 29904 |
| W22 | 42549 | 42549 |
| W23 | 48056 | 48056 |
| W24 | 45851 | 45851 |
When to use #
Use it for
- Profit and loss, latency against a budget, cash against a floor.
- Testing a threshold before setting an alert.
Skip it when
- Several series; use the line chart.
- A fixed target nobody will move; draw a reference line.
Installation #
pnpm dlx shadcn@latest add @caliper/baseline-chart
Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source. It is built from baselineSummary and BaselineChart.
import { baselineSummary, BaselineChart } from "@/components/ui/baseline-chart"
The worked example comes with Pro
The 10-line example behind the preview opens here with a Pro or Team licence.
API reference #
baselineSummary
component
No props of its own; it accepts the native props of its root element.
BaselineChart
component
Accessibility #
It exposes group, slider and status semantics, with aria-label, aria-busy, aria-hidden, aria-valuemin, aria-valuemax and aria-valuenow kept in step with state. Changes that matter are announced through a live region.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.