# TrendChart

Values over time as an instrument: a live legend that reads the crosshair, drag-to-measure deltas, annotations, thresholds and linked views.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/trend-chart
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/TrendChart.tsx

## Usage

```tsx
import { TrendChart } from "mizu-ui";

export function Example() {
  const day = (d: number) => Date.UTC(2026, 8, d);
  return (
    <TrendChart
      label="Weekly active teams"
      utc
      series={[
        {
          id: "teams",
          label: "Teams",
          area: true,
          data: [
            { x: day(1), y: 412 },
            { x: day(2), y: 436 },
            { x: day(3), y: 431 },
            { x: day(4), y: 478 },
            { x: day(5), y: 502 },
            { x: day(6), y: 497 },
            { x: day(7), y: 540 },
          ],
        },
      ]}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/trend-chart
```

## Props

- `label`: `string`. Accessible name and visible title.
- `series`: `TrendSeries[]`. id, label, data of { x, y } (null y leaves a gap), tone, area and dashed.
- `annotations / thresholds`: `TrendAnnotation[] / TrendThreshold[]`. Numbered moments with detail; labelled reference values such as an SLO.
- `format / formatX`: `(value: number) => string`. Value and x formatting. Values default to compact numbers; x to time stamps.
- `xType`: `"time" | "number"` (default `"time"`). How x is scaled and labelled.
- `utc / height / zero`: `boolean / number / boolean`. UTC time, plot height and a zero baseline (on for areas).
- `range / defaultRange / onRangeChange`: `[number, number]`. Visible x range. Share it between charts to zoom them together.
- `cursor / onCursorChange`: `number | null`. Crosshair position. Share it to read several charts at once.
- `loading / empty`: `boolean / ReactNode`. Loading and empty states.

## Keyboard

- ← →: Read the previous or next value (Alt: ten at a time)
- Shift + ← →: Extend a measured period
- Enter: Zoom to the measured period
- + −: Zoom around the crosshair
- 0: Show the whole range (or double-click)
- Esc: Clear the crosshair and measurement
- Ctrl + scroll: Zoom at the pointer

## Accessibility

The plot is a focusable chart group: arrow keys step through readings and each reading is announced with every series. Shift extends a measured period. The legend is a set of toggle buttons that always keeps one series visible. A table view presents the visible readings as a real table.

## Motion

Lines draw from left to right on first view and areas fade in after them. Zooms glide; the value axis eases to the visible data. Reduced motion shows the finished chart and changes instantly.