Series

Financial series

Candles, bars, lines, areas, histograms, baselines, and the advanced financial series.

Series kinds

Financial series kinds
Kind	Data	Use it for
`candlestick`	`ohlc_data`	Classic OHLC candles.
`bar`	`ohlc_data`	OHLC bars.
`line`	`single_value_data`	Close prices, spreads, any single value.
`area`	`single_value_data`	A line with a gradient fill.
`histogram`	`single_value_data`	Volume and other per-bar columns.
`baseline`	`single_value_data`	Values colored above and below a base value.
`footprint`	`footprint_trade`	Bid and ask volume at every price. See Footprint and order flow.

Adding and styling a series

Series

const area = chart.addSeries("area", { title: "BTC" });
area.setData([
  { time: 1735689600, value: 94210 },
  { time: 1735693200, value: 94480 },
]);

area.applyOptions({ visible: true, last_value_visible: true });
area.set_type("line"); // switch kinds on the same data

chart.removeSeries(area);

Series handles also provide options, series_type, pane_index, move_to_pane, move_to_price_scale, price_formatter, price_to_coordinate, coordinate_to_price, and fit_viewport.

Advanced financial series

Advanced financial series kinds
Kind	Row shape
`heatmap`	`{ time, cells: [{ low, high, amount }] }`
`hlc_area`	`{ time, high, low, close }`
`stacked_area`	`{ time, values: number[] }`
`stacked_bars`	`{ time, values: number[] }`
`grouped_bars`	`{ time, values: number[] }`
`pretty_histogram`	`{ time, value, color? }`
`whisker_box`	`{ time, quartiles: [5 numbers], outliers? }`
`background_shade`	`{ time, value }`

Heatmap

const heatmap = chart.addSeries("heatmap", {
  cell_border_width: 1,
  cell_border_color: "rgba(255,255,255,.08)",
  cell_shader: (amount) => `rgba(80,0,255,${Math.min(1, amount / 100)})`,
});
heatmap.setData(heatmapRows);

Every stacked_area row needs the same number of layers. The old brushable_area kind is deprecated: use an ordinary area series with enable_brushable_area_interaction().