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.

View .md

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 into your configured UI directory, with base.css, Mizu’s tokens, and the stylesheets that hold its rules. Each rule lives in one stylesheet, so components you add together never repeat CSS. In a project without a components.json, run npx shadcn@latest init 0xuser64bit/mizu/preset first: plain init installs shadcn’s theme into your global CSS. Then load the fonts.

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

Every component imports from its own path, its name in kebab case. To paste the example, replace its mizu-ui import with:

tsx
import { TrendChart } from "@/components/ui/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. A Client Component: its source starts with “use client”.

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