# DrawnChart

> An animated figure for a measured claim: a headline number counts up from zero and a bar or line chart draws in beside it, holds, then loops.

```ts
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.

## Examples

```tsx
<DrawnChart
	aria-label="Median time between checks, by how often a feed posts"
	metric={{ value: 15, suffix: " min", label: "Between checks of an hourly feed" }}
	series={[{ label: "Hourly", value: 15, display: "15 min" }, { label: "Daily", value: 240, display: "4 h" }]}
	highlight={0}
/>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `"aria-label"` | `string` | Accessible name of the chart: the bars' list, or the line's image. Required. |
| `pauseLabel?` | `string` | Accessible name of the pause toggle. |
| `metric?` | `Metric` |  |
| `variant?` | `"bars" \| "line"` | Defaults to `"bars"`, drawn horizontally so labels read on a phone. |
| `series` | `readonly Datum[]` |  |
| `max?` | `number` | Value a full bar, or the top of the plot, stands for. Defaults to the series' largest value. |
| `highlight?` | `number` | Index of the one datum drawn in the brand colour. |
| `footnote?` | `RemixNode` | 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. |