Sparklines

The createSparklineConfig helper turns any chart config into a sparkline preset — axes, legend, tooltip, crosshair and point markers hidden and margins collapsed — leaving only the plotted shapes for tiny inline charts.

Open in demo ↗

// createSparklineConfig turns an ordinary chart config into a sparkline
// preset: axes, legend, tooltip, crosshairs and point markers hidden and
// margins collapsed, leaving only the plotted shape.
import { createSparklineConfig } from '@mochart/core';
import type { MochartInputConfig } from '@mochart/core';

export const config: MochartInputConfig = createSparklineConfig({
  version: '1.0.0',
  categoryAxis: { property: 'day', type: 'number', scale: 'linear' },
  series: [{ property: 'revenue', title: 'Revenue', renderer: 'area' }]
});

const values = [
  112, 118, 115, 121, 119, 124, 128, 125, 131, 129,
  134, 138, 135, 132, 137, 141, 145, 142, 147, 151,
  148, 153, 158, 155, 161, 164, 160, 166, 171, 169
];

export const data = values.map((revenue, day) => ({ day, revenue }));

How it works

• createSparklineConfig(config, options) returns a new config; it only fills in defaults, so any value set on the passed config wins. To bring one piece back, set it explicitly: legend: { visible: true } survives the preset untouched. The value axes are hidden through valueAxisDefaults, so it works whether or not the config declares any; their base line, which draws in the plot rather than the axis band, is switched off there too.
• interactive: true keeps the tooltip and crosshair enabled for sparklines large enough to host them; padding (default 2px) is set as the chart padding and keeps strokes at the data extremes from clipping against the chart edges.
• Point markers are hidden by nulling marker.shape through seriesDefaults, so line series render as a bare stroke.
• The sparkline is still a regular chart — size it by mounting it small (this page uses a 56px-tall host; table cells around 150×32 work well) and it renders any series type. A win/loss strip is two bar series with missingValueMode: 'connect', one property per direction, on an axis fixed to min: -1, max: 1 — the same one-property-per-direction trick the waterfall uses.