Skip to content
MIZU.

SIG—02 Signature system

TrendChart

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

Live — this one is real

Scenario

Illustrative data. Hover or use arrow keys to read; drag to measure a period; Ctrl-scroll to zoom.

Checkout latency

Drag across the chart to measure a period.

Left and right arrows read each value; Shift extends a measured period and Enter zooms to it. Plus and minus zoom, 0 shows the whole range, Escape clears.

Error rate

Drag across the chart to measure a period.

Left and right arrows read each value; Shift extends a measured period and Enter zooms to it. Plus and minus zoom, 0 shows the whole range, Escape clears.

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 },
          ],
        },
      ]}
    />
  );
}

This code, running — no configuration beyond the data

Weekly active teams

Drag across the chart to measure a period.

Left and right arrows read each value; Shift extends a measured period and Enter zooms to it. Plus and minus zoom, 0 shows the whole range, Escape clears.

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

Source & setup

Add this component to your project with the shadcn CLI. The command copies its source and styles into your configured UI directory.

sh
npx shadcn@latest add 0xuser64bit/mizu/trend-chart

For npm imports, import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Requires React and Motion.

Inspect signature/TrendChart.tsx

Source is included in the npm package under src/signature/TrendChart.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelstring—Accessible name and visible title.
seriesTrendSeries[]—id, label, data of { x, y } (null y leaves a gap), tone, area and dashed.
annotations / thresholdsTrendAnnotation[] / 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""time"How x is scaled and labelled.
utc / height / zeroboolean / 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 / onCursorChangenumber | null—Crosshair position. Share it to read several charts at once.
loading / emptyboolean / ReactNode—Loading and empty states.

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.

Works alongside

ChronicleWaveformPlaneFlowGraph