Size Panes From Code in Vela 0.8.5

Version 0.8.5 of the open-source core of Vela by LuxAlgo is out. It is a release for anyone embedding the library in their own app: panes can now be sized from code and report their size changes, click and crosshair events name the pane under the pointer, and native plugin indicators can wait for a symbol's full history before they compute. One change is breaking: the linear-regression built-in type is gone, replaced by two studies.

Size panes from code

chart.panes.setHeightWeight(paneId, weight) sets how much of the chart's height a pane takes, relative to the others. The price pane starts at a weight of 3 and each indicator pane at 1, so a weight of 6 on the price pane next to two indicator panes gives it three quarters of the height.

// Price pane next to two indicator panes (weights 1 and 1)
chart.panes.setHeightWeight(paneId, 6); // price pane now takes 6 / 8 of the height

// Each pane now reports its weight
const panes = chart.panes.list(); // includes heightWeight per pane

chart.panes.list() now reports each pane's heightWeight, and pane:changed fires whenever a pane's size changes: when the user lets go of a pane separator, and when a new indicator creates its pane. A host can save the layout and keep its own pane controls in step without polling.

A related fix: dragging a pane separator and then adding an indicator that draws on an existing pane, such as a moving average on the price chart, used to snap every pane back to its default height. Pane sizes now stay until you change them.

Layering inside a pane is also easier to control. New indicators start behind the candles, so a line or candle overlay on the price chart could be hidden. An overlay's legend row Move to menu and its right-click menu now step it one layer at a time: Bring in front of price, Bring in front of the next indicator, Send behind price, or Send behind the previous one. Every other layer keeps its place, the order is saved with the chart, and the legend lists each pane's indicators in drawing order, front-most on top, matching the object tree.

Know which pane was clicked

onClick now reports the pane that was clicked and the value under the click on that pane's scale, alongside the bar time. onCrosshairMove reports the pane under the cursor. Both carry the pane's paneId, the same id chart.panes uses, and right-click menu actions get it on ctx.pointer too. A click on one of several indicator panes can now be told apart from the others.

// Inside a right-click menu action: act on the pane under the pointer
const paneId = ctx.pointer.paneId;
chart.panes.setHeightWeight(paneId, 3);

Because the id is shared, the value you get from onClick or onCrosshairMove can be passed straight to chart.panes calls.

Indicators that wait for the full history

A native indicator registered with waitsForHistory: true does not compute while the chart's history is still loading. Its legend row shows a loading state, and it computes once, over every candle, when the history is complete. If the history is extended later, the previous output holds in place until the new candles have all arrived. Without the flag, an indicator keeps computing as each part of the history lands.

const indicator = {
  // ...your native indicator definition
  waitsForHistory: true,
};

Built-in studies now behave this way by default. When older candles arrived after the first paint, a study such as an EMA could slide back in time, end before the last candle, or vanish until the next price update. They now wait for the history to finish, show a loading state, then compute once. Volume still paints from the first candles, plugin indicators no longer slide, and shortening the history from the chart settings leaves every indicator on its candles.

Plots can now continue past the last candle. A plot shifted forward, such as a Pine Script® plot() with a positive offset, keeps drawing into the empty space to the right of the latest candle. Fills between such plots follow them, and the price scale keeps their values in view. Engines get this by emitting points beyond the last bar, one per future bar; older engines are unaffected.

Three more fixes land here. Built-in studies recalculate over Heikin Ashi candles as soon as you switch the chart style, and over regular candles when you switch back. Indicators drawing their own candles or bars, through Pine Script® plotcandle() and plotbar() or a custom engine, keep updating when some bars have no candle (for example with show_last), and a candle with any missing price is skipped the same way. Plugin-drawn visuals now clear the moment you change symbol or timeframe, and nothing the old market was still loading is drawn on the new one.

Breaking: Linear Regression becomes two studies

The Linear Regression Curve opened an empty pane below the chart while its curve drew over the candles. It is replaced by the Least Squares Moving Average, which draws on the price chart like the other averages, colored by its slope and with a regression offset, and the Linear Regression Slope, which plots the fit's change per bar in its own pane around a zero line.

// Removed in 0.8.5
// 'linear-regression'

// Use one of these built-in types instead
// 'lsma'
// 'linear-regression-slope'

Saved charts keep their study: a saved curve opens as an LSMA with the same length, and a saved slope as a Linear Regression Slope. Code that adds the linear-regression type needs to switch to lsma or linear-regression-slope.

Get it

npm i @luxalgo/vela

Read the docs at velacharts.dev and the full list of changes in the 0.8.5 changelog. The source is on GitHub.