Skip to content

Programmatic control

listeners report what the user did; the methods on the chart instance do the same things from code. They are not synthetic events — a call runs the very path a hover or a click runs, so the listeners fire and the state changes exactly as if the pointer had done it.

ts
const chart = Charts.create(options);

chart.showTooltip({ datumIndex: 12 }); // hover a datum from a table row
chart.clickNode({ datumIndex: 12 }); // nodeClick + the selection a click makes
chart.setSelection([{ datumIndex: 3 }, { datumIndex: 7 }]);
chart.zoomToCount(30, { anchor: 'end' }); // show the last 30 points

Methods

MethodReturnsWhat it does
showTooltip(target)booleantooltip + highlight on a datum, as hovering it would
hideTooltip()hides both, as leaving the plot does
clickNode(target, opts?)booleannodeClick and the selection change a click causes
getSelection()SelectedNode[]current selection: seriesId, datumIndex, datum
setSelection(targets, opts?)replaces the selection wholesale
clearSelection(opts?)empties it
isZoomed()booleanwhether the window is narrower than the full domain
zoomTo(window, opts?){ x?: [from, to], y?: [from, to] } — fractions of the domain
zoomToCount(count, opts?)window of N items; anchor: 'start' | 'end'
resetZoom(opts?)back to the full domain

target is { datumIndex, seriesId? }. Without a seriesId the visible series answer in order — the first one holding a node for that index wins.

Silent calls

Every call that changes something notifies the listeners by default. An app that drives the chart from its own state usually does not want that: the listener would push the change straight back and the two would ping-pong. Pass { silent: true }:

ts
listeners: {
  selectionChange: ({ items }) => store.select(items.map((item) => item.datum.id)),
}

// applying the store back to the chart — without re-entering the listener
store.subscribe((ids) => chart.setSelection(ids.map(toTarget), { silent: true }));

silent covers the chart's own listeners and the sync group broadcast alike, so a silent zoomTo does not move the charts it is synced with.

What answers false

showTooltip and clickNode need a node that is actually on screen. They return false when the datum is outside the current zoom window, belongs to a hidden series, or simply does not exist — a return value worth checking before assuming the tooltip is up. The selection is bookkeeping rather than geometry, so setSelection accepts any index.

Rendering

The calls schedule a frame the same way options updates do. Await waitForUpdate() when the next line depends on the frame being on screen — a screenshot, a measurement, an assertion in a test:

ts
chart.showTooltip({ datumIndex: 4 });
await chart.waitForUpdate();
const png = chart.getImageDataURL();

Not every chart has everything

A pie has no zoom, and neither has a treemap. Calling what a chart kind does not have is a no-op with a one-off console warning rather than an error, so an unsupported call never breaks a dashboard that shares code across chart types.

Chart kindTooltipClick and selectionZoom
cartesian
pie, donut, polar
treemap, sunburst, flow