60FOLDCOMPONENTS

Shared chart options

Options and runtime controls available on both line and stock charts.

LineChartOptions and StockChartOptions include the same interaction, axes, labels, overlays, viewport, and rendering controls. You do not construct a base chart or import an internal rendering engine.

Use the Line options or Stock options reference for exact fields. Shared runtime methods appear directly on LineChart and StockChart.

Construction groups

Renderer and interaction

  • renderMode selects auto, worker, or main. Read the actual result with getRenderMode().
  • rendererInitializationTimeout limits renderer startup time in milliseconds. It defaults to 15 seconds, begins at construction, and may be set to 0 to disable the watchdog.
  • interactive: false disables pan, zoom, pinch, and selection while preserving hover information.
  • minViewportRange limits zoom in X-data units.
  • yDomain: { min, max } pins either or both Y-domain edges across zoom, LOD changes, and streaming updates; omitted edges remain auto-scaled.
  • wheelZoomSpeed, wheelZoomDirection, keyboardZoomSpeed, and keyboardPanSpeed tune navigation.
  • keyboardActivation chooses focus-based or hover-based keyboard control.
  • keyboardAnnouncements localizes the polite status messages emitted after keyboard pan, zoom, reset, and selection cancellation; its optional viewport template accepts {startPercent}, {endPercent}, and {spanPercent}. Set it to false when the host provides equivalent feedback.
  • animated controls data reveals and viewport/axis transitions. When omitted, prefers-reduced-motion: reduce disables animation and changes to that preference are observed while the chart remains mounted. An explicit true or false remains authoritative.

Canvas content

grid, axis, chartBackground, rangeSelector, tooltip, crosshairStyle, selection, labels, overlay, padding, and textDirection work the same way on line and stock charts.

Chart typography defaults to the exported DEFAULT_CHART_FONT_FAMILY, an SFMono-first instrument stack. Per-surface family fields remain authoritative.

Use a fully fixed domain when a live display should preserve visual scale instead of following each new extremum:

const chart = new LineChart(canvas, {
  yDomain: { min: 0, max: 100 },
});

yDomain is disabled by default. It is shared by line and stock charts and applies consistently to worker, main-thread, and SSR rendering.

Viewport controls

const current = chart.getViewport();

chart.setViewport(
  { xMin: current.xMin + 60_000, xMax: current.xMax - 60_000 },
  { animated: true },
);

chart.reset({ animated: true });

Omitted viewport edges retain their current value. Ranges are normalized against the complete data extent and the chart’s minViewportRange.

Runtime appearance

Construction-only behavior and mutable appearance are intentionally separate. getOptions() returns the normalized full snapshot. getAppearance() returns only fields that are safe to patch live. Both are typed as DeepReadonly snapshots; nested plain objects and arrays are copied, so apply changes through the runtime methods instead of mutating returned values.

chart.updateAppearance({
  chartBackground: "#081018",
  grid: { color: "rgba(130, 180, 220, 0.16)" },
  axis: { bottom: { labelFont: { color: "#a9bac9" } } },
});

Patches merge into current appearance. setLabels() and async setOverlay() are focused convenience methods for the same state.

Batch synchronous changes when one user action updates several properties:

chart.batch(() => {
  chart.updateAppearance({ grid: { color: "#26384a" } });
  chart.setViewport({ xMin, xMax });
});

Do not await inside batch; only the synchronous calls made before the callback returns are coalesced.

Tooltips

The built-in tooltip is Canvas2D-rendered. tooltip.onRender executes on the main thread and can replace its title and rows; keep it fast because pointer movement can invoke it frequently. tooltip.onLeave is appropriate for clearing application state.

Use explicit titleFormat for large numeric X values. Automatic detection treats values above approximately one billion as time-like.

Overlays

Overlays support text, rectangles, circles, lines, and images in ratio or CSS-pixel coordinates relative to the chart area or full canvas. String image sources are fetched and decoded asynchronously. Await setOverlay() and configure CORS for remote images.

Caller-supplied ImageBitmap handles remain caller-owned. Worker and main-thread rendering structured-clone them and close only renderer-owned clones. A construction-time background or eager-only overlay may be closed after initialize() fulfills. If a construction overlay mixes a caller bitmap with a URL or another asynchronously resolved source, keep the handle open until the overlay is replaced or destroyed; alternatively, call and await setOverlay() after initialization before closing it.

Runtime backgrounds and eager-only overlays may be closed after updateAppearance() (or its containing batch()) returns, even while initialization is pending. For a mixed or deferred runtime overlay, call setOverlay() directly and keep caller handles open until its promise settles. The URL fetch/decode implementation is delivered as a separate on-demand chunk and is not part of the initial browser runtime.

If some sources fail, setOverlay() installs the successful items and rejects with ChartOverlayError. If every requested item fails, the previously rendered overlay remains installed. Resolution and renderer-delivery failures also reach setOverlayErrorCallback() and framework adapter error hooks. Superseding a pending update or destroying the chart is routine cancellation: the pending promise resolves without installing and no overlay error is reported.

Accessibility

Sixtyfold adds fallback semantics only when the host has not already supplied them. Interactive charts receive role="application", tabindex="0", and a fallback accessible name. View-only charts (interactive: false) receive role="img" and are not added to the tab order. Existing role, tabindex, aria-label, and aria-labelledby attributes are preserved.

Prefer an application-specific name and description:

<canvas
  aria-label="Hourly load for feeder 12"
  aria-describedby="feeder-12-summary"
></canvas>
<p id="feeder-12-summary">Latest load is 73 kW; the daily peak was 96 kW.</p>

For an interactive chart, provide an adjacent text summary or data-table alternative and reference it with aria-describedby. Do not force role="img" onto a keyboard-operated chart. Color must not be the only way the surrounding application identifies a series.

Keyboard pan, zoom, reset, and selection cancellation are announced through a hidden polite live region. Localize these messages with keyboardAnnouncements, update them later with setKeyboardAnnouncements(), or disable them when the surrounding application provides equivalent feedback. The optional viewport template can add the visible start, end, and span as percentages of the complete data range. Animated pan, zoom, and reset messages wait for the renderer-confirmed viewport to settle, so an intermediate animation frame is never announced.

Sixtyfold does not announce every streamed sample or repaint through aria-live; high-frequency announcements would make the chart unusable with a screen reader. When an application has meaningful events such as a disconnected feed or threshold crossing, expose them through an application-owned, throttled live region.