<mndw-sparkline>

The CPU sparkline summarizes recent load in a compact chart. This example uses timed samples so the chart can label its time axis.

Examples

import type {MndwChartSample} from '@mndw/ui';

const START_TIME = 1_730_000_000_000;
const MINUTE = 60_000;

export function mount(root: HTMLElement): void {
  const chart = document.createElement('mndw-sparkline');
  const values = [31, 34, 29, 38, 43, 40, 52, 48, 57, 54, 63, 59, 68, 61, 72];
  const points: MndwChartSample[] = values.map((value, index) => ({
    time: START_TIME + index * MINUTE,
    value,
  }));

  chart.setAttribute('value-label', 'CPU load');
  chart.setAttribute('aria-label', 'CPU load history');
  chart.style.width = '100%';
  chart.max = 100;
  chart.points = points;
  root.appendChild(chart);
}

Reference

Assign MndwChartSample[] to the property-only points value. A sample has a numeric value and optional epoch-millisecond time; MndwChartPoint requires time. Replace the array with a new reference when data changes. The compact time axis appears only when every normalized sample has a finite time; mixed timed and untimed samples render without an axis. timeDomain sets the axis start and end independently of the samples. With a timeDomain, timed samples whose values are non-finite reserve empty slots instead of being removed from layout.

max sets the scale ceiling and defaults to 100; an invalid runtime maximum falls back to 100 for drawing while tooltip and accessibility text keep the sample's original value. color accepts accent, success, warning, or muted; invalid colors fall back to accent. Values default to rounded percentages. Use value-label, empty-label, and aria-label to name the chart and empty state. valueFormatter(value) and timeFormatter(epochMs) customize displayed values. The host has role="img"; an authored aria-label wins, otherwise its name uses value-label or neutral Values. The container, plot, axis, tooltip, and empty parts are available; axis exists only for fully timed data. Tooltips are local to the plot and are cleared on data redraw until the pointer moves again.