Waveform

Waveform buckets a high-frequency signal and draws each bucket's maximum, never its mean, so one spike survives the squeeze down to sparkline width. Averaging would erase the spike someone is looking for. The auto domain is symmetric at ±max|data|, and the peak is disclosed in the accessible summary.

Install

import { Waveform } from "@microcharts/react/waveform";// samples — real values under “Sample data” below<Waveform data={samples} title="Voice memo" />

const samples = Array.from(  { length: 200 },  (_, i) =>    (i === 126 ? 0.82 : Math.sin(i / 3) * 0.15 + Math.sin(i / 11) * 0.35) *    (1 - Math.abs(i - 100) / 260),);

Try it

import { Waveform } from "@microcharts/react/waveform/interactive";// samples — real values under “Sample data” below<Waveform  data={samples}  progress={0.63}/>

const samples = Array.from(  { length: 200 },  (_, i) =>    (i === 126 ? 0.82 : Math.sin(i / 3) * 0.15 + Math.sin(i / 11) * 0.35) *    (1 - Math.abs(i - 100) / 260),);

When to use it

Use it for voice-memo and audio scrubbers, and for high-frequency log or request volume. For exact values use Sparkline; for categorical state use Hypnogram.

Sizing

Variants

With a locale, the announced peak follows that locale's own decimal mark: "0,82" in German, not "0.82".

Comparing loudness across rows needs an explicit shared domain. Without one, each chart fits its own max, and quiet data is rescaled to look loud.

Edge cases

A single sample renders as one bucket, top-to-bottom. All-zero data renders every bucket at the shared 0.4-unit "silent" tick height, and the accessible summary says "Silent." rather than reporting a zero peak. A null behaves the same as a true zero for any bucket where it is the only sample: maxPerBucket skips non-finite values when picking the bucket's peak, and a bucket with nothing finite in it falls back to that same silence tick. A genuine gap and real silence therefore render identically here, unlike Sparkline's line break.

Four homes

Accessibility

The accessible name discloses the peak: "Peak 0.398 at 50% through 200 samples." Pure silence reads "Silent." rather than blank. The interactive entry roves the buckets, announcing each bucket's position and peak amplitude.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again, press Escape, or press outside the chart. On touch, a tap pins and a drag scrubs.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.