Indicators

95 built-in indicators. Add one by its id; parameters you leave out take their defaults, and invalid ones fall back to them.

Adding an indicator

const ema = chart.addIndicator('ema', { period: 50 })          // on the price pane
const rsi = chart.addIndicator('rsi', { period: 14 }, 'bottom') // in a pane of its own
chart.updateIndicator(rsi, { period: 21 })
chart.removeIndicator(rsi)

addIndicator returns an instance id: the same indicator can be added several times, each instance with its own inputs, colours and levels.

Sources and indicators on indicators

Indicators marked source below can run on another price than the close (open, high, low, hl2, hlc3, ohlc4, hlcc4) or on another indicator's line. A moving average of RSI is drawn in RSI's pane, on its scale, and goes when RSI does.

import { indicatorSource } from '@tradecanvas/chart'

chart.updateIndicator(ema, { source: 'hlc3' })
const smoothed = chart.addIndicator('sma', { period: 9, source: indicatorSource(rsi, 'value') })

Pane indicators can also share a pane: chart.addIndicator('stochastic', {}, 'bottom', { pane: rsi }).

Levels, colours and values

chart.setIndicatorLevels(rsi, [20, 50, 80])   // null restores 30 / 70
chart.updateIndicatorStyle(rsi, { colors: ['#f2a93b'], lineWidths: [2] })
chart.setIndicatorVisible(rsi, false)

const series = chart.getIndicatorOutput(rsi)?.series ?? []
const latest = series[series.length - 1]?.value   // keyed by the line keys below

Each line's latest value is tagged on its axis in the line's colour; turn the tags off with features.indicatorValueLabels: false or setIndicatorValueLabelsVisible(false). A pane's lines, levels, axis and crosshair share one scale.

On the price pane (35)

id	Name	Default params	Lines
sma	Simple Moving Average· source	period: 20, source: "close"	SMA
ema	Exponential Moving Average· source	period: 20, source: "close"	EMA
bb	Bollinger Bands· source	period: 20, stdDev: 2, source: "close"	Upper, Basis, Lower
vwap	Volume Weighted Average Price	—	VWAP
ichimoku	Ichimoku Cloud	tenkan: 9, kijun: 26, senkou: 52, displacement: 26	Conversion, Base, Lead A, Lead B
psar	Parabolic SAR	step: 0.02, max: 0.2	SAR
supertrend	Supertrend	period: 10, multiplier: 3	Supertrend
keltner	Keltner Channel	emaPeriod: 20, atrPeriod: 10, multiplier: 1.5	Upper, Basis, Lower
donchian	Donchian Channel	period: 20	Upper, Basis, Lower
pivots	Pivot Points (Classic)	lookback: 24	R3, R2, R1, P, S1, S2, S3
avwap	Anchored VWAP	anchorTime: 0	AVWAP
zigzag	ZigZag	deviation: 5	Pivot
lrc	Linear Regression Channel· source	period: 100, stdDev: 2, source: "close"	Upper, Basis, Lower
hma	Hull Moving Average· source	period: 21, source: "close"	HMA
mtfma	MTF Moving Average· source	period: 50, timeframe: "1d", source: "close"	MA
svwap	Session VWAP	bands: 1	VWAP, +1σ, −1σ, +2σ, −2σ, +3σ, −3σ
chandelier	Chandelier Exit	period: 22, multiplier: 3	Long, Short
alligator	Alligator	jaw: 13, teeth: 8, lips: 5, jawShift: 8, teethShift: 5, lipsShift: 3	Jaw, Teeth, Lips
vwma	Volume Weighted Moving Average· source	period: 20, source: "close"	VWMA
wma	Weighted Moving Average· source	period: 20, source: "close"	WMA
envelope	Moving Average Envelope· source	period: 20, percent: 2.5, source: "close"	Upper, Basis, Lower
tema	Triple EMA· source	period: 20, source: "close"	TEMA
volumeProfile	Volume Profile	rows: 24	—
dema	Double Exponential Moving Average· source	period: 20, source: "close"	DEMA
smma	Smoothed Moving Average· source	period: 14, source: "close"	SMMA
alma	Arnaud Legoux Moving Average· source	period: 9, offset: 0.85, sigma: 6, source: "close"	ALMA
kama	Kaufman Adaptive Moving Average· source	period: 10, fast: 2, slow: 30, source: "close"	KAMA
lsma	Least Squares Moving Average· source	period: 25, offset: 0, source: "close"	LSMA
mcginley	McGinley Dynamic· source	period: 14, source: "close"	McGinley
macross	MA Cross· source	fast: 9, slow: 21, type: "sma", source: "close"	Fast, Slow
fractals	Williams Fractals	period: 2	Up, Down
cks	Chande Kroll Stop	p: 10, x: 1, q: 9	Stop Long, Stop Short
seb	Standard Error Bands	period: 21, mult: 2, smooth: 3	Upper, Middle, Lower
gmma	Guppy Multiple Moving Average	—	EMA 3, EMA 5, EMA 8, EMA 10, EMA 12, EMA 15, EMA 30, EMA 35, EMA 40, EMA 45, EMA 50, EMA 60
maribbon	Moving Average Ribbon	ma1: 20, ma2: 50, ma3: 100, ma4: 200, exponential: 0	MA 1, MA 2, MA 3, MA 4

mtfma plots a moving average from a higher timeframe on the current chart — the daily 50-MA on 1h bars, say. It averages only completed higher-timeframe closes, so it steps at each boundary and never repaints.

In a pane of their own (60)

id	Name	Default params	Lines	Levels
rsi	Relative Strength Index· source	period: 14, source: "close"	RSI	30, 70
macd	MACD· source	fast: 12, slow: 26, signal: 9, source: "close"	Histogram, MACD, Signal	—
stochastic	Stochastic Oscillator	kPeriod: 14, dPeriod: 3, smooth: 3	%K, %D	20, 80
atr	Average True Range	period: 14	ATR	—
adx	Average Directional Index	period: 14	ADX, +DI, −DI	—
obv	On Balance Volume	—	OBV	—
williamsR	Williams %R	period: 14	%R	-80, -20
cci	Commodity Channel Index	period: 20	CCI	-100, 0, 100
mfi	Money Flow Index	period: 14	MFI	20, 80
aroon	Aroon	period: 25	Up, Down	—
roc	Rate of Change· source	period: 12, source: "close"	ROC	0
tsi	True Strength Index· source	longPeriod: 25, shortPeriod: 13, signalPeriod: 7, source: "close"	TSI, Signal	0
cmf	Chaikin Money Flow	period: 20	CMF	—
stddev	Standard Deviation· source	period: 20, source: "close"	StdDev	—
ad	Accumulation/Distribution	—	A/D	—
vroc	Volume Rate of Change	period: 14	VROC	0
ao	Awesome Oscillator	fast: 5, slow: 34	AO	—
chaikinOsc	Chaikin Oscillator	fast: 3, slow: 10	Chaikin	—
voldelta	Volume Delta	mode: 0	Delta	—
vortex	Vortex Indicator	period: 14	VI+, VI−	1
chop	Choppiness Index	period: 14	CHOP	38.2, 61.8
uo	Ultimate Oscillator	fast: 7, mid: 14, slow: 28	UO	30, 70
fi	Force Index	period: 13	EFI	0
crsi	Connors RSI· source	rsiPeriod: 3, streakPeriod: 2, rankPeriod: 100, source: "close"	CRSI	10, 90
coppock	Coppock Curve· source	longRoc: 14, shortRoc: 11, wma: 10, source: "close"	Coppock	0
kst	Know Sure Thing· source	roc1: 10, roc2: 15, roc3: 20, roc4: 30, sma1: 10, sma2: 10, sma3: 10, sma4: 15, signal: 9, source: "close"	KST, Signal	0
elderray	Elder Ray	period: 13	Bull, Bear	—
stc	Schaff Trend Cycle· source	fast: 23, slow: 50, cycle: 10, source: "close"	STC	25, 75
kvo	Klinger Oscillator	fast: 34, slow: 55, signal: 13	KVO, Signal	0
fisher	Fisher Transform	period: 9	Fisher, Trigger	0
dpo	Detrended Price Oscillator· source	period: 20, source: "close"	DPO	—
bop	Balance of Power	smooth: 14	BOP	0
massindex	Mass Index	ema: 9, sum: 25	Mass	26.5, 27
cmo	Chande Momentum· source	period: 9, source: "close"	CMO	-50, 0, 50
trix	TRIX· source	period: 15, signal: 9, source: "close"	TRIX, Signal	0
emv	Ease of Movement	period: 14	EOM	0
pvt	Price Volume Trend	—	PVT	—
wad	Williams A/D	—	WAD	—
chaikinvol	Chaikin Volatility	ema: 10, roc: 10	CV	0
rvi	Relative Vigor Index	period: 10	RVGI, Signal	0
stochrsi	Stochastic RSI· source	rsiPeriod: 14, stochPeriod: 14, k: 3, d: 3, source: "close"	%K, %D	20, 80
ppo	Percentage Price Oscillator· source	fast: 12, slow: 26, signal: 9, source: "close"	Histogram, PPO, Signal	0
ac	Accelerator Oscillator	—	AC	—
rmi	Relative Momentum Index· source	period: 20, momentum: 5, source: "close"	RMI	30, 70
disparity	Disparity Index· source	period: 14, source: "close"	DI	0
qstick	Qstick	period: 8	Qstick	0
pgo	Pretty Good Oscillator	period: 14	PGO	-3, 0, 3
bbpb	Bollinger Bands %B· source	period: 20, stdDev: 2, source: "close"	%B	0, 0.5, 1
bbw	Bollinger BandWidth· source	period: 20, stdDev: 2, source: "close"	BBW	—
mom	Momentum· source	period: 10, source: "close"	MOM	0
hv	Historical Volatility· source	period: 10, annual: 365, source: "close"	HV	—
vo	Volume Oscillator	short: 5, long: 10	Vol Osc	0
ulcer	Ulcer Index· source	period: 14, source: "close"	Ulcer	—
smi	Stochastic Momentum Index	period: 10, smooth: 3, signal: 3	SMI, Signal	40, -40
rvix	Relative Volatility Index	period: 10, smooth: 14	RVI	80, 50, 20
trendstrength	Trend Strength Index	period: 14	Trend	0
lrslope	Linear Regression Slope	period: 14	Slope	0
stderror	Standard Error	period: 14	StdErr	—
adr	Average Day Range	period: 14	ADR	—
netvolume	Net Volume	—	Net	0

voldelta (Volume Delta) approximates buy/sell pressure from OHLCV — bars closing up add positive volume, down bars negative. mode: 0 is the per-bar histogram, mode: 1 cumulative delta. (A true tick delta needs per-trade bid/ask data, which an OHLCV series doesn't carry.)

Your own indicator

Extend IndicatorBase and declare what it draws (plots), its pane scale, levels and inputs; the chart draws it, scales its pane, tags its values and lists it in the widget's legend and settings without rendering code of yours. See the custom indicator recipe.

Panes: resize, fold, maximise, reorder

Drag the divider above a pane to resize it. In ChartWidget each pane has buttons at its top right: move it up or down, fold it to its header, maximise it (the other panes fold and the price pane keeps a strip). Saved layouts keep each pane's size, order, fold and maximise. The same from code:

chart.setPanelSize(rsi, 180)        // px, clamped to a minimum
chart.setPaneCollapsed(macd, true)  // fold to its header
chart.setMaximizedPane(rsi)         // null puts the panes back
chart.movePane(rsi, -1)             // one place up; 1 = down
chart.on('paneChange', (e) => e.payload.change)  // 'collapsed' | 'maximized' | 'order' | 'scale'
chart.setPaneScale(atr, { log: true, invert: false })  // log while its values are above 0
chart.setPaneScale(atr, { percent: true })             // labels in percent of its first value on screen

Right-click a pane in ChartWidget for its own logarithmic, inverted or percent scale.

Moving an indicator to another pane

An indicator can join another indicator's pane (it then shares that pane's scale), take a pane of its own, or go back to the price pane. When it leaves a pane it owned, the others in it stay (the next pane indicator takes the pane over), and those reading its lines follow it. In ChartWidget, the ⋯ button on a legend row offers the pane above, the pane below, a new pane and the price pane.

chart.moveIndicatorToPane(cci, rsi)      // into RSI's pane
chart.moveIndicatorToPane(cci, 'new')    // a pane of its own
chart.moveIndicatorToPane(ema, 'price')  // an overlay back to the price pane
chart.canMoveIndicatorToPane(cci, rsi)   // whether it would move

Undo, and templates

Adding, removing, editing and moving indicators are undo steps in the same history as drawings (Ctrl/⌘ Z, Ctrl/⌘ Shift Z); an undone indicator comes back under its own id, so alerts on its lines still match. A burst of edits to one indicator (a colour dragged, a period typed) is one step. A loaded layout starts a fresh history.

The indicators can be taken and put back as a whole, which is what ChartWidget's indicator templates do: Save indicators as template… in the indicators menu keeps them (inputs, style, levels, panes) under a name, and picking a template puts them in place of the chart's, as one undo step.

const setup = chart.getIndicatorSetup()   // what a layout keeps of them
chart.applyIndicatorSetup(setup)          // in place of the chart's indicators

new ChartWidget(host, { indicatorTemplates: true })  // the default

Computing outside the chart

IndicatorWorkerHost computes an indicator from bars with the same messages a Web Worker would use. The worker script is not part of the published packages yet, so pass null and register the plugins to compute in place (SSR, tests, scripts):

import { IndicatorWorkerHost, RSIIndicator } from '@tradecanvas/core'

const host = new IndicatorWorkerHost(null)
host.registerFallbackPlugin(new RSIIndicator())
const output = await host.calculate('rsi', { id: 'rsi', instanceId: 'rsi-1', params: { period: 14 } }, bars)