Mount, render & export

A Chart is inert until you materialize it. Three methods do that:

• .mount(canvas, opts?) → MountedPlot<T> — the full interactive path: the mount owns a renderer, a glyph atlas, three layers, a requestAnimationFrame loop, and a ResizeObserver.
• .render(target) → void — compile + emit into layers you already own.
• .toSVG(opts?) → SVGSVGElement — a static vector export.

.mount(canvas, opts?)

const device = await (await navigator.gpu.requestAdapter())!.requestDevice();

const mounted = chart.mount(canvas, {
  device,
  interactions: { tooltip: true, crosshair: { axis: "x" } },
  panZoom: true,
});

A GPUDevice is required when the mount has to create its own renderer / atlas — pass it via plot({ device }) or mount(canvas, { device }).

Key MountPlotOptions

Option	Type	Notes
device	GPUDevice	Required unless you pass your own renderer.
build	() => Chart<T>	Rebuild closure called on each invalidate() — for charts derived from external state.
width / height	number	Fixed CSS size; disables auto-resize when both set.
dpr	number	Override devicePixelRatio.
autoResize	boolean	Track size via ResizeObserver. Default true unless fixed size.
autoFrame	boolean	Internal rAF loop. Default true.
pauseOnHidden	boolean	Pause while document.hidden. Default true.
background	Color	Overrides chart / theme background.
interactions	boolean | InteractionsConfig	See below.
transitions	boolean | TransitionsConfig	Animate on data / config change. Default on.
panZoom	boolean | PanZoomConfig	Pointer pan/zoom on continuous scales. Off by default.
clipMarks	boolean	Clip marks to the inner plot panel. Default true.
partialRedraw	boolean	Damage-tracked partial redraw. Default on.

Advanced bring-your-own hatches — renderer, layers, extraLayers, onFrameTiming, enablePipelineProfiling — let you share a renderer, supply your own layers, or hook frame timing.

Interactions

interactions is true (defaults: hover tooltip on hit-testable geoms + snapping crosshair on continuous-x charts), false (all off), or an InteractionsConfig:

Field	Default	What it does
tooltip	on	Hover tooltip; content resolver overrides the body.
crosshair	on (continuous x)	Guide line; axis, color, followPointer.
selection	off	Click-to-select; exposes MountedPlot.selected.
brush	off	Drag-to-rect; exposes MountedPlot.brushed.
legend	on	Click-to-toggle series visibility; exposes MountedPlot.hidden.
contextMenu	off	Right-click / long-press menu (needs items or onTrigger).

MountedPlot<T>

The returned handle:

Member	Type	Notes
invalidate()	void	Schedule a redraw next frame.
update(source?)	void	Swap the chart (Chart<T>), the build closure (() => Chart<T>), or force a rebuild.
setData(data)	void	Replace the data array.
resize(w?, h?)	void	Manual resize (re-reads bounds if no args).
setBackground(color | null)	void	Override / revert background.
toSVG(opts?)	SVGSVGElement	Static export from the current spec + data.
destroy()	void	Tear down the loop, observers, signals, and owned GPU resources.
hovered / selected / brushed / hidden	read-only signals	Subscribe / peek interaction state.
viewport	DataViewport | null	Present only when panZoom was enabled.
pickAt(canvasX, canvasY)	{ plotFrameX, plotFrameY, dataX, dataY, frame } | null	Screen → data conversion through the active coord.
plotFrame	Frame	Inner panel rect (union of all facet panels).
width / height / dpr / shapeCount / triangleCount	number	Current render stats.
renderer / axisLayer / marksLayer / hudLayer / overlayLayer	refs	Escape hatches to internal pieces.

It also exposes imperative attach helpers: attachRangePresets(...), attachSeriesReadout(...), and attachBrush(...).

const unsub = mounted.hovered.subscribe((hit) => {
  console.log(hit ? `over ${hit.geomKind}#${hit.dataIndex}` : "out");
});

.render(target)

Compile and emit into externally owned layers — use when the host already owns a Renderer2D and wants its own frame loop / timing.

interface RenderTarget {
  axisLayer: Layer;
  marksLayer: Layer;
  hudLayer: Layer;
  width?: number;
  height?: number;
}

chart.render({ axisLayer, marksLayer, hudLayer, width: 800, height: 400 });
renderer.render([axisLayer, marksLayer, hudLayer]);

.render() only fills the three layers; you call the renderer yourself and manage resize / interactions. For everything else, prefer .mount().

.toSVG(options?)

A static, dependency-free vector export — no GPU device required.

const svg = chart.toSVG({ width: 600, height: 400 });
document.body.append(svg);

MountedPlot.toSVG() does the same from a live mount’s current spec + data.

Next

• Core (imperative) API — the insomni-plot/core primitives behind .render().
• Axes & coordinates — what plotFrame and pickAt project against.