Chart types
Select a style by name - addSeries(type, options). All of these ship in the base tier:
chart.addSeries('candlestick'); // hollow-candle, volume-candle, bar, high-low,
// line, line-markers, step, area, hlc-area,
// baseline, column, histogramCandlesticks
The default OHLC style. Up/down colors come from the theme or per-series style.
const chart = lib.createChart(el);
chart.addSeries('candlestick').setData(lib.generateBars(1700000000, 140, 3600));
chart.timeScale.fitContent(140);
return chart;live
Rendering live chart…
Line & area
line reads close; area fills below it with a real vertical gradient.
const chart = lib.createChart(el);
const bars = lib.generateBars(1700000000, 140, 3600);
chart.addSeries('area', {
style: { color: '#2f6df6', areaTopColor: 'rgba(47,109,246,0.45)', areaBottomColor: 'rgba(47,109,246,0)' }
}).setData(bars);
chart.timeScale.fitContent(140);
return chart;live
Rendering live chart…
Baseline
Colors the series above/below a reference value - handy for P&L or change-from-open.
const chart = lib.createChart(el);
const bars = lib.generateBars(1700000000, 140, 3600);
chart.addSeries('baseline', { style: { baseValue: bars[0].close } }).setData(bars);
chart.timeScale.fitContent(140);
return chart;live
Rendering live chart…
Bars & columns
OHLC bars, and a column/histogram style for volume.
const chart = lib.createChart(el);
const bars = lib.generateBars(1700000000, 120, 3600);
chart.addSeries('bar').setData(bars);
chart.addSeries('histogram', { paneIndex: 1 }).setData(
bars.map(b => ({ time: b.time, value: b.volume, close: b.volume }))
);
chart.timeScale.fitContent(120);
return chart;live
Rendering live chart…
Movement-driven styles - Heikin Ashi, Renko, Range, Line Break, Point & Figure, Kagi - come from the transform tier.