Core concepts

Panes and scales

Stack panes, move series between them, and use left, right, overlay, and named price scales.

Panes

A chart is a vertical stack of panes that share the time scale. Oscillators such as RSI open their own pane automatically. Add panes yourself with addPane, then place a series in one with the pane option or moveToPane.

Panes

const volume = chart.addSeries("histogram");
volume.moveToPane(1);

const pane = chart.panes()[1];
pane.set_height(140);
pane.set_stretch_factor(0.3);

chart.swap_panes(0, 1);

Pane handles also expose get_height, get_geometry, move_to, get_series, attach_primitive, and price_scale. Users can resize panes by dragging the separator unless layout.panes.enableResize is false.

Price scales

Each pane has a left and a right price scale, and series can also sit on an overlay scale. Named scales let you add more: names are 1 to 128 characters, case-sensitive, with up to 16 per pane. Scale modes include normal, logarithmic, percentage, and indexed to 100.

Price scales

const btc = chart.addSeries("line", { price_scale_id: "right" });
const eth = chart.addSeries("line", { price_scale_id: "left" });

chart.applyOptions({ leftPriceScale: { visible: true } });
btc.priceScale().applyOptions({ scale_margins: { top: 0.1, bottom: 0.2 } });

Time scale

const timeScale = chart.timeScale();

timeScale.fitContent();
timeScale.scroll_to_real_time();
timeScale.set_visible_range({ from: 1735689600, to: 1736294400 });
timeScale.set_visible_logical_range({ from: 100, to: 250 });

const x = timeScale.time_to_coordinate(1735689600);

Other time-scale methods: scroll_position, scroll_to_position, reset_time_scale, get_visible_range, get_visible_logical_range, coordinate_to_time, logical_to_coordinate, coordinate_to_logical, time_to_index, width, and height.