지표

95종의 내장 지표를 제공합니다. id로 지표를 추가하며, 생략한 파라미터는 기본값을 사용하고 잘못된 값도 기본값으로 대체됩니다.

지표 추가

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는 인스턴스 id를 반환합니다. 같은 지표를 여러 번 추가할 수 있으며, 각 인스턴스는 고유한 입력값, 색상, 레벨을 가집니다.

소스와 지표 위의 지표

아래 표에서 소스로 표시된 지표는 종가 대신 다른 가격 (open, high, low, hl2, hlc3, ohlc4, hlcc4)이나 다른 지표의 선을 기반으로 계산할 수 있습니다. RSI의 이동평균은 RSI 패널에 RSI의 눈금으로 그려지며, RSI를 삭제하면 함께 사라집니다.

import { indicatorSource } from '@tradecanvas/chart'

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

패널 지표끼리 패널을 공유할 수도 있습니다: chart.addIndicator('stochastic', {}, 'bottom', { pane: rsi }).

레벨, 색상, 값

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

각 선의 최신 값은 선과 같은 색으로 축에 태그로 표시됩니다. 태그는 features.indicatorValueLabels: false 또는 setIndicatorValueLabelsVisible(false)로 끌 수 있습니다. 패널 안의 선, 레벨, 축, 십자선은 하나의 눈금을 공유합니다.

가격 패널 위 (35)

id	이름	기본 파라미터	선
sma	Simple Moving Average· 소스	period: 20, source: "close"	SMA
ema	Exponential Moving Average· 소스	period: 20, source: "close"	EMA
bb	Bollinger Bands· 소스	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· 소스	period: 100, stdDev: 2, source: "close"	Upper, Basis, Lower
hma	Hull Moving Average· 소스	period: 21, source: "close"	HMA
mtfma	MTF Moving Average· 소스	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· 소스	period: 20, source: "close"	VWMA
wma	Weighted Moving Average· 소스	period: 20, source: "close"	WMA
envelope	Moving Average Envelope· 소스	period: 20, percent: 2.5, source: "close"	Upper, Basis, Lower
tema	Triple EMA· 소스	period: 20, source: "close"	TEMA
volumeProfile	Volume Profile	rows: 24	—
dema	Double Exponential Moving Average· 소스	period: 20, source: "close"	DEMA
smma	Smoothed Moving Average· 소스	period: 14, source: "close"	SMMA
alma	Arnaud Legoux Moving Average· 소스	period: 9, offset: 0.85, sigma: 6, source: "close"	ALMA
kama	Kaufman Adaptive Moving Average· 소스	period: 10, fast: 2, slow: 30, source: "close"	KAMA
lsma	Least Squares Moving Average· 소스	period: 25, offset: 0, source: "close"	LSMA
mcginley	McGinley Dynamic· 소스	period: 14, source: "close"	McGinley
macross	MA Cross· 소스	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는 상위 시간 단위의 이동평균을 현재 차트에 표시합니다. 예를 들어 1h 봉 위에 일봉 50-MA를 그릴 수 있습니다. 완성된 상위 시간 단위 종가만 평균하므로 각 경계에서 계단식으로 바뀌며, 지나간 값이 다시 그려지지(repaint) 않습니다.

별도 패널 (60)

id	이름	기본 파라미터	선	레벨
rsi	Relative Strength Index· 소스	period: 14, source: "close"	RSI	30, 70
macd	MACD· 소스	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· 소스	period: 12, source: "close"	ROC	0
tsi	True Strength Index· 소스	longPeriod: 25, shortPeriod: 13, signalPeriod: 7, source: "close"	TSI, Signal	0
cmf	Chaikin Money Flow	period: 20	CMF	—
stddev	Standard Deviation· 소스	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· 소스	rsiPeriod: 3, streakPeriod: 2, rankPeriod: 100, source: "close"	CRSI	10, 90
coppock	Coppock Curve· 소스	longRoc: 14, shortRoc: 11, wma: 10, source: "close"	Coppock	0
kst	Know Sure Thing· 소스	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· 소스	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· 소스	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· 소스	period: 9, source: "close"	CMO	-50, 0, 50
trix	TRIX· 소스	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· 소스	rsiPeriod: 14, stochPeriod: 14, k: 3, d: 3, source: "close"	%K, %D	20, 80
ppo	Percentage Price Oscillator· 소스	fast: 12, slow: 26, signal: 9, source: "close"	Histogram, PPO, Signal	0
ac	Accelerator Oscillator	—	AC	—
rmi	Relative Momentum Index· 소스	period: 20, momentum: 5, source: "close"	RMI	30, 70
disparity	Disparity Index· 소스	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· 소스	period: 20, stdDev: 2, source: "close"	%B	0, 0.5, 1
bbw	Bollinger BandWidth· 소스	period: 20, stdDev: 2, source: "close"	BBW	—
mom	Momentum· 소스	period: 10, source: "close"	MOM	0
hv	Historical Volatility· 소스	period: 10, annual: 365, source: "close"	HV	—
vo	Volume Oscillator	short: 5, long: 10	Vol Osc	0
ulcer	Ulcer Index· 소스	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)는 OHLCV로 매수/매도 압력을 근사합니다. 상승 마감한 봉은 양의 거래량을, 하락 봉은 음의 거래량을 더합니다. mode: 0은 봉별 히스토그램, mode: 1은 누적 델타입니다. (진짜 틱 델타를 구하려면 체결별 매수/매도 데이터가 필요한데, OHLCV 시리즈에는 그 정보가 없습니다.)

나만의 지표

IndicatorBase를 상속하고 그릴 대상(plots), 패널 눈금, 레벨, 입력값을 선언하세요. 렌더링 코드를 직접 작성하지 않아도 차트가 지표를 그리고, 패널 눈금을 맞추고, 값을 태그로 표시하며, 위젯의 범례와 설정에 나열합니다. 사용자 지정 지표 레시피를 참고하세요.

패널: 크기 조절, 접기, 최대화, 순서 바꾸기

패널 위쪽의 구분선을 드래그해 크기를 조절합니다. ChartWidget에서는 패널마다 오른쪽 위에 버튼이 있어 패널을 위나 아래로 옮기거나, 머리글만 남게 접거나, 최대화할 수 있습니다(다른 패널은 접히고 가격 패널은 좁은 띠로 남습니다). 저장된 레이아웃에는 패널마다 크기, 순서, 접기와 최대화 상태가 유지됩니다. 코드로는 다음과 같습니다.

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

ChartWidget에서 패널을 오른쪽 클릭하면 그 패널만의 로그 눈금, 반전 눈금, 퍼센트 눈금을 쓸 수 있습니다.

지표를 다른 패널로 옮기기

지표는 다른 지표의 패널에 합류하거나(그러면 그 패널의 눈금을 함께 씁니다), 자기만의 패널을 갖거나, 가격 패널로 돌아갈 수 있습니다. 자신이 주인인 패널을 떠나도 그 패널의 다른 지표는 남고(다음 패널 지표가 패널을 이어받습니다), 그 지표의 선을 읽는 지표는 함께 따라갑니다. ChartWidget에서는 범례 행의 ⋯ 버튼으로 위 패널, 아래 패널, 새 패널, 가격 패널 중에서 고를 수 있습니다.

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

실행 취소와 템플릿

지표 추가, 삭제, 편집, 이동은 그림과 같은 기록에 쌓이는 실행 취소 단계입니다 (Ctrl/⌘ Z, Ctrl/⌘ Shift Z). 실행 취소로 되살아난 지표는 원래 id 그대로 돌아오므로 그 선에 건 알림도 계속 연결됩니다. 한 지표에 잇따라 한 편집(색상 드래그, 기간 입력)은 한 단계로 묶입니다. 레이아웃을 불러오면 기록이 새로 시작됩니다.

지표 전체를 한꺼번에 꺼냈다가 다시 넣을 수 있으며, ChartWidget의 지표 템플릿이 바로 이 방식입니다. 지표 메뉴의 지표를 템플릿으로 저장…은 지표(입력값, 스타일, 레벨, 패널)를 이름을 붙여 저장하고, 템플릿을 고르면 차트의 지표가 그것으로 바뀝니다. 이 교체는 실행 취소 한 단계입니다.

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

차트 밖에서 계산하기

IndicatorWorkerHost는 Web Worker가 사용하는 것과 같은 메시지로 봉 데이터에서 지표를 계산합니다. 워커 스크립트는 아직 배포 패키지에 포함되어 있지 않으므로, null을 넘기고 플러그인을 등록해 그 자리에서 계산하세요(SSR, 테스트, 스크립트).

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)