Core concepts

Events and interaction

Subscribe to crosshair, click, and range events, and tune pan, zoom, and touch input.

Chart events

Crosshair and clicks

const onMove = (params) => {
  if (!params.point || params.time === null) return; // cursor left the chart
  const bar = params.series_data.get(candles);
  legend.textContent = bar ? `O ${bar.open} H ${bar.high} L ${bar.low} C ${bar.close}` : "";
};

chart.subscribe_crosshair_move(onMove);
chart.subscribe_click((params) => console.log(params.time, params.pane_index));

// later
chart.unsubscribe_crosshair_move(onMove);

Mouse event parameters include time, logical, point (CSS pixels relative to the pane), pane_index, series_data keyed by series handle, and value_snapshot.

All subscriptions

Chart subscriptions
Subscribe	Fires when
`subscribe_crosshair_move`	The crosshair moves, and once with point: null when it leaves.
`subscribe_click`	A click or tap lands inside a pane.
`subscribe_dbl_click`	A double click lands inside a pane.
`subscribe_chart_context`	A secondary click opens a context, with the exact price under the cursor.
`subscribe_visible_time_range_change`	The visible time range changes.
`subscribe_visible_logical_range_change`	The visible logical range changes.
`subscribe_series_added, subscribe_series_removed`	A series is added or removed.
`subscribe_options_change`	Chart options change.
`subscribe_drawing_tool_change, subscribe_drawing_created`	The armed drawing tool changes, or a drawing is completed.

Pan, zoom, and touch

Wheel. With wheel_behavior: "auto", vertical wheel deltas zoom time and horizontal deltas pan it. Each 100 px notch changes bar spacing by 15%, so one notch in and one out cancel. Ctrl or Cmd with the wheel, and pinch, zoom around the pointer.
Touch. The engine owns the gesture state: a 5 px drag threshold, pinch zoom, and page-scroll arbitration, so a chart inside a scrolling page does not trap the page.
Keyboard. With accessibility on, arrow keys pan, plus and minus zoom, and Escape cancels the current gesture or tool.
Off switches. Set handle_scroll or handle_scale to false to lock the view.

Syncing several charts

To link crosshairs across charts, read crosshair_sync_position() from one chart and pass it to apply_external_crosshair() on the others. take_sync_events() and apply_external_sync_event() do the same for view changes. For a ready-made split layout, see create_chart_grid in Advanced.