<mndw-bar-chart>

This chart shows per-minute traffic using fixed epoch-millisecond samples. Bars occupy positional slots, so the chart does not require a time-domain property.

Examples

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

// Value imports from @mndw/ui are dynamic: a static one would evaluate the custom elements during the
// docs SSR build, where HTMLElement does not exist. The theme has already loaded @mndw/ui by now.

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

export function mount(root: HTMLElement): void {
  const chart = document.createElement('mndw-bar-chart');
  const values = [4200, 5500, 4900, 7200, 6600, 8100, 7400, 9200, 8600, 10400, 9600];
  const points: MndwChartPoint[] = values.map((value, index) => ({
    time: START_TIME + index * MINUTE,
    value,
  }));

  chart.setAttribute('value-label', 'Traffic per minute');
  chart.setAttribute('aria-label', 'Traffic per minute over ten minutes');
  chart.style.width = '100%';
  void import('@mndw/ui').then(({formatSpeed, getSpeedUpperLimit}) => {
    chart.valueFormatter = formatSpeed;
    chart.valueDomain = {min: 0, max: getSpeedUpperLimit(Math.max(...values))};
    chart.tooltipFormatter = ({samples}) => ({
      title: 'Traffic sample',
      rows: [{label: 'Rate', value: formatSpeed(samples[0]?.value ?? 0)}],
    });
    chart.points = points;
    root.appendChild(chart);
  });
}

Reference

Assign MndwChartPoint[] to the points property. Each point has an epoch-millisecond time and numeric value; the ordered points become positional band slots, with no time-domain property. points and formatter callbacks are property-only; replace the array with a new reference when data changes. *Props interfaces are optional assignment bags, while initialized elements expose defaults such as points = [] and color = 'accent'.

color accepts accent, success, warning, or muted; invalid runtime values fall back to accent. Values default to locale-aware numbers and the Y domain uses a rounded ceiling based on the data. Set valueDomain to control the minimum and maximum; set valueFormatter(value) to customize values. For network speed, set valueFormatter = formatSpeed and valueDomain = {min: 0, max: getSpeedUpperLimit(maxValue)}; the helper keeps the existing 5000 minimum. timeFormatter(epochMs) customizes time labels. The host has role="img"; an authored aria-label wins, otherwise the name uses value-label or neutral Values. The container, plot, grid, axis, tooltip, and empty parts are available for styling. Tooltips stay local to the plot; data redraw clears stale tooltip state until the pointer moves again. Import formatSpeed and getSpeedUpperLimit from @mndw/ui for speed charts.

tooltipFormatter(context) is a property-only callback with the bar's time and one raw sample (seriesId: 'value'). Return {title?, rows} to replace the tooltip, or null to hide it while keeping the hover band. An omitted title uses timeFormatter(time). Formatter errors are logged and fall back to the default tooltip.