Core concepts

Chart and options

Create a chart, choose a backend, and configure layout, grid, crosshair, scales, and input.

Creating a chart

Signature

createChart(container: HTMLElement, options?: deep_partial<chart_options>): Promise<chart_api>

The chart installs its canvases inside container. If creation fails, it removes them and leaves the container as it was. Without initialPane, the first pane is a financial time pane.

Options

Chart options
Option	What it controls
`autoSize`	Follow the container size with a ResizeObserver. Default false.
`theme`	"light" or "dark". Applied under your explicit options, and switchable live with applyOptions.
`backend`	"auto" (WebGPU with Canvas2D fallback, the default) or "canvas2d".
`layout`	background, textColor, mutedTextColor, bullishColor, bearishColor, fontSize, fontFamily, and pane separators (panes.enableResize defaults to true).
`grid`	vertLines and horzLines. Visible and dashed by default.
`crosshair`	vertLine, horzLine, and mode.
`leftPriceScale, rightPriceScale`	Price scale visibility, borders, margins, and mode.
`timeScale`	Time axis border and color, plus time-scale options through chart.timeScale().applyOptions().
`watermark`	Text watermark: visible, text, color, font, and alignment.
`wheel_behavior`	"auto", "pan", or "zoom" for the mouse wheel.
`handle_scroll, handle_scale`	Turn pan and zoom input on or off. Both default to true.
`kinetic_scroll`	Momentum scrolling. Touch only by default.
`price_axis_wheel_zoom`	Zoom price with the wheel over the price axis. Default false.
`accessibility`	Keyboard and screen-reader support. On by default.
`localization`	Formatter callbacks for prices and times.
`initialPane`	The first pane's horizontal domain, for general-only charts.
`licenseKey`	Commercial license key. Read at creation only.

Example

Configured chart

const chart = await createChart(container, {
  autoSize: true,
  theme: "dark",
  layout: { fontSize: 12 },
  grid: { vertLines: { visible: false } },
  rightPriceScale: { borderVisible: false },
  wheel_behavior: "auto",
});

// Change options later on the same chart.
chart.applyOptions({ theme: "light" });

Rendering backend

By default the chart uses WebGPU and falls back to Canvas2D when WebGPU is unavailable. Both backends execute the same frame, so the output matches. backend_status() reports the requested and active backend and the reason for any fallback.

Backend

const chart = await createChart(container, { backend: "canvas2d" });
console.log(chart.backend(), chart.backend_status());

Chart methods

Chart methods by purpose
Purpose	Methods
Series	`add_series, add_custom_series, remove_series, series_order, set_series_order`
Panes	`panes, add_pane, remove_pane, swap_panes`
Scales	`time_scale, price_scale, add_price_scale, price_scales, move_price_scale, remove_price_scale`
General axes	`add_axis, axis, axes, remove_axis, compose_general_pane`
Coordinates	`price_to_coordinate, coordinate_to_price, value_snapshot, format_time_label`
Crosshair	`set_crosshair_position, clear_crosshair_position, apply_external_crosshair`
View	`resize, render, reset_view, reset_style_to_defaults, apply_options, options`
State	`export_state, import_state, take_screenshot`
Diagnostics	`backend, backend_status, frame_stats`
Domains	`trading, alerts, accessibility`
Lifecycle	`remove`