MiniChart v0.1 · interactive demo

Fast, dependency-free time-series charting on pure Canvas 2D. Every feature below is live — hover, click, toggle, tweak.

7.4 KB gzipped <1ms redraw @ 50k pts 0 dependencies monotone cubic · overlay hover · zoom · themes · a11y

1 Line chart with gradient fill

Monotone cubic interpolation (Fritsch–Carlson) — smooth, never overshoots. Adaptive Y labels, honest time axis. Hover for the crosshair + tooltip.

type: linefilltension: 0.5hover tooltip

2 Multi-series with legend toggle

Click a legend dot to hide/show a series. The Y-axis rescales to the visible set — hide the noisy one and watch the axis tighten.

3 seriesauto-rescale on toggleclickable legend

3 Live-updating data stream

A rolling 60-second window, updated every 500ms via chart.update(). Frame budget holds well under 16.7ms.

cur: — max: —

4 Bar chart from zero baseline

Discrete bars for cumulative counters. Bars grow from zero (not the floor), so a non-zero yMin and negative values both render correctly.

type: barzero baseline

5 Zoom (viewport scales)

The setXRange() API narrows the visible window. This is the foundation for interactive zoom/pan and cross-chart cursor sync.

view: full domain

6 Gaps on null / NaN

Missing data renders as a break, not a misleading connector. Essential for monitoring — a dropped collector must read as a gap, not a flat trend.

null → gapNaN → gapmonitoring-honest

7 Negative values & auto Y-min

Auto-scaling now derives both ends of the Y range. Temperature deltas, signed net.rx, and all-negative series all render right-side-up.

yMin: null (auto)crosses zerozero baseline

8 Custom formatters & theme

Detach your domain language from the chart core with yFormat / xFormat, and recolor every visual via theme.

9 Event handlers

Wire on.{ready, hover, click, seriesToggle} for custom tooltips, analytics, or cross-chart sync. Hover/click the chart below.

events will appear here…

10 50 000 points (pixel-bucket decimation)

Dense series are reduced to ~2 points per pixel column, preserving peaks and troughs. The overlay canvas keeps hover cheap regardless of N.

rendering…