Renderer features

chart.renderer is the control surface for the active renderer — read and change how the chart is drawn at runtime, with no indicator re-run.

chart.renderer.set('logScale', true); // one feature
chart.renderer.set({ upColor: '#fff', glow: 0.6 }); // several at once → one repaint
chart.renderer.get('logScale'); // read the current value
chart.renderer.supports('glow'); // is it available on this renderer?
chart.renderer.name; // 'native'
chart.renderer.capabilities; // what the renderer can draw

A key the active renderer doesn't support emits a console warning and is ignored — the chart is never touched. Use supports() to check first (e.g. to hide a UI control on a renderer that lacks the feature).

These are the same keys you can pass at construction (as options); setting them through chart.renderer.set applies them live instead of rebuilding the chart — so toggling them never re-executes your indicators.

Common features

Available on every renderer:

Native renderer

name === 'native'. Supports every common feature, plus its own. They group into appearance, interaction, axes & scale, and in-chart UI.

Appearance

Interaction

The anim* features and intro are what the animations option resolves to (see Options). The rich config carries only their on/off state — animations.{zoom, pan, autoscale, intro} and priceScale.animateLastPrice, the rows of the settings dialog's Symbol → Animation group; turning one on there reuses the last non-zero duration set through the option or the feature.

Double-click behavior changed. Double-clicking the chart data area no longer fits the content to the view. Instead it maximizes the double-clicked pane so it fills the chart and every other pane is fully hidden: double-clicking the price pane hides all study panes, and double-clicking a study pane hides the price pane (and any other studies). A second double-click on the maximized pane restores the previous layout. Double-click on an axis strip (reset that axis) and on a pane separator (even split) is unchanged. To fit content the way the old data-area double-click did, press the 0 key.

Axes & scale

Styling the shadeRight veil

While a crosshairOverride with shadeRight paints its veil, the chart also places an empty element with the class vela-shade-right over exactly the veiled area: from the right edge of the picked bar to the price scale, across the full plot height. It sits below the crosshair layer and above the candles, indicators and drawings, so a backdrop-filter on it reaches the bars under the veil but never the crosshair line or the veil color itself:

.vela-shade-right { backdrop-filter: grayscale(1); }

chart.renderer.set('crosshairOverride', {
  horizontal: false,
  shadeRight: { color: 'rgba(0, 0, 0, 0)' }, // a transparent veil: grey bars, no darkening
});

The element is transparent unless you style it, ignores the pointer, is hidden from assistive technology, and carries the hidden attribute whenever no veil is painted. It follows a synced crosshair's veil too.

In-chart UI

Pane controls. Hovering a pane reveals a small button cluster in its top-right corner: move the pane up/down, collapse/expand it, and maximize/restore it. Each indicator's legend row also carries a Move to control for moving or merging it into another pane — merging gives the moved indicator its own price-scale column to the right of the pane's scale, autoscaled independently. This is a native-renderer capability (capabilities.paneManagement); on a renderer that lacks it the pane operations warn and no-op.

The drawing toolbar is also in-chart UI, but it lives on its own facade — chart.drawings, not chart.renderer — and is shown by default. It adds its own keyboard shortcuts (undo/redo, copy/paste/duplicate, delete, nudge) on top of the navigation keys above.

Screenshot export

chart.renderer.screenshot() returns a PNG data URL of the current chart (or null on a renderer that doesn't support it, with a warning). It composites the canvas layers in the order you see them: the series geometry — with any drawings stacked among the series already inside it — then the chrome layer that carries script-drawn shapes, then the drawings that sit over everything. The crosshair, the DOM overlays (tables, legend, data window) and the volume-profile layer are not included.

const url = chart.renderer.screenshot();
if (url) { const a = document.createElement('a'); a.href = url; a.download = 'chart.png'; a.click(); }

Data-window readout

chart.renderer.dataWindowReadout() returns the bar under the crosshair — or the latest bar when the cursor is off the plot — as a ready-to-display snapshot: the timestamp split into date and time, the ohlc block (with vol when the bar carries volume, and up telling you which way to tint it), and one groups entry per indicator holding a row per plot with its own color. Every number is already formatted on the scale of the pane it belongs to, so a panel built on it does no formatting of its own.

Pair it with onCrosshairMove to keep your own readout in step; it returns null on a renderer that doesn't provide one. This is what the workspace's data window is built from.

chart.renderer.onCrosshairMove(() => {
    const readout = chart.renderer.dataWindowReadout();
    if (!readout) return;
    console.log(readout.date, readout.time, readout.ohlc?.c);
    for (const group of readout.groups) console.log(group.name, group.rows);
});

Rich config (templates / persistence)

chart.renderer.getConfig() returns the renderer's full cosmetics as a serializable, versioned JSON document — every inherited value is resolved to a concrete one, so an exported template stands on its own. Feed it back with applyConfig() to restore saved settings or load a template. Untrusted/partial JSON is validated and merged, so malformed fields are dropped and a partial patch changes only what it names. No indicator re-run.

const template = chart.renderer.getConfig(); // snapshot
localStorage.setItem('chartConfig', JSON.stringify(template));

chart.renderer.applyConfig(JSON.parse(localStorage.getItem('chartConfig'))); // restore
chart.renderer.applyConfig({ candles: { upColor: '#26a69a' } }); // partial patch

The covered cosmetics include layout (background, text, font), grid colors/visibility, crosshair (color/width/style/opacity/label), price scale (mode, log, border, labels, current-price line, last-price animation on/off), the animation switches (zoom, pan momentum, price-scale glide, first-load reveal), time-scale timezone, candle border/wick, and per-style colors for bars / line / area / baseline.

Custom renderers

The native renderer is the only bundled backend, but the multi-renderer port stays: a custom IChartRenderer class passed as options.renderer declares its own features list, and every chart.renderer call degrades gracefully (unsupported keys warn and no-op). See adding a renderer.