Skip to content
MIZU.

Sparkline

A compact history trace with the underlying readings in its accessible name.

Live — this one is real

Illustrative build duration in seconds: 4, 3, 3.6, 2.2, 2.8, 1.5, 1.2

Usage

import { Sparkline } from "mizu-ui";

export function Example() {
  return (
    <Sparkline
      label="Illustrative build duration in seconds"
      values={[4, 3, 3.6, 2.2, 2.8, 1.5, 1.2]}
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect data/Charts.tsx

Source is included in the npm package under src/data/Charts.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
valuesnumber[]—Sequential readings; non-finite values are omitted.
labelstring—Describe the quantity and units.

Accessibility

SVG has a unique title with the full readings. Use a table for large datasets; this is a compact trend.

Motion

Static SVG, no background loop.

Works alongside

DataTableDescriptionListStatBarChart