DrawnChart
An animated figure for a measured claim.
View code
<DrawnChart
aria-label="Median time between checks, by how often a feed posts"
pauseLabel="Pause the animation"
metric={{ value: 18240, suffix: " feeds", label: "Checked in the last hour" }}
series={[
{ label: "Posts several times an hour", value: 15, display: "15 min" },
{ label: "Posts hourly", value: 30, display: "30 min" },
{ label: "Posts a few times a day", value: 120, display: "2 h" },
{ label: "Posts daily or less", value: 240, display: "4 h" },
]}
highlight={0}
footnote="Median over the last 30 days"
/>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { DrawnChart } from "@sdxc/ui/landing";Renders the figure on a raised surface inside a MotionLoop. The markup is the finished figure: full bars or line and the real formatted number, which is what reduced motion and assistive technology get. Charts with the same series length share keyframes.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
"aria-label" | string | Yes | Accessible name of the chart: the bars' list, or the line's image. Required. |
pauseLabel | string | No | Accessible name of the pause toggle. |
metric | Metric | No | |
variant | "bars" | "line" | No | Defaults to "bars", drawn horizontally so labels read on a phone. |
series | readonly Datum[] | Yes | |
max | number | No | Value a full bar, or the top of the plot, stands for. Defaults to the series' largest value. |
highlight | number | No | Index of the one datum drawn in the brand colour. |
footnote | RemixNode | No | A note under the chart, such as the period or the source of the numbers. |
Also accepts everything in Omit<TagProps<"div">, "children">.
Types
| Name | Values | What it decides |
|---|---|---|
Variant | "bars" | "line" | How the chart draws its series. |