Indicadores
134 indicadores integrados. Añade uno por su id; los parámetros que omitas toman su valor predeterminado, y los no válidos vuelven a él.
● DemosPatrones y paneles de indicadoresDatos de mercado simulados, generados en tu navegadorAñadir un indicador
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 devuelve un id de instancia: el mismo indicador se puede
añadir varias veces, cada instancia con sus propios parámetros, colores y niveles.
Fuentes e indicadores sobre indicadores
Los indicadores marcados con fuente más abajo pueden calcularse sobre
otro precio distinto del cierre (open, high, low, hl2, hlc3, ohlc4, hlcc4) o sobre la línea de otro indicador. Una media móvil del RSI
se dibuja en el panel del RSI, en su escala, y desaparece cuando se quita el RSI.
import { indicatorSource } from '@tradecanvas/chart'
chart.updateIndicator(ema, { source: 'hlc3' })
const smoothed = chart.addIndicator('sma', { period: 9, source: indicatorSource(rsi, 'value') }) Los indicadores en panel también pueden compartir un panel: chart.addIndicator('stochastic', {}, 'bottom', { pane: rsi }).
Niveles, colores y valores
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 El último valor de cada línea se marca en su eje con el color de la línea;
desactiva estas etiquetas con features.indicatorValueLabels: false o setIndicatorValueLabelsVisible(false). Las líneas, los niveles, el
eje y la cruz de un panel comparten una misma escala.
En el panel de precio (48)
| id | Nombre | Parámetros predeterminados | Líneas |
|---|---|---|---|
sma | Simple Moving Average· fuente | period: 20, source: "close" | SMA |
ema | Exponential Moving Average· fuente | period: 20, source: "close" | EMA |
bb | Bollinger Bands· fuente | 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 | lookback: 24, type: "traditional" | R3, R2, R1, P, S1, S2, S3 |
avwap | Anchored VWAP | anchorTime: 0 | AVWAP |
zigzag | ZigZag | deviation: 5 | Pivot |
lrc | Linear Regression Channel· fuente | period: 100, stdDev: 2, source: "close" | Upper, Basis, Lower |
hma | Hull Moving Average· fuente | period: 21, source: "close" | HMA |
mtfma | MTF Moving Average· fuente | 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· fuente | period: 20, source: "close" | VWMA |
wma | Weighted Moving Average· fuente | period: 20, source: "close" | WMA |
envelope | Moving Average Envelope· fuente | period: 20, percent: 2.5, source: "close" | Upper, Basis, Lower |
tema | Triple EMA· fuente | period: 20, source: "close" | TEMA |
volumeProfile | Volume Profile | rows: 24 | — |
dema | Double Exponential Moving Average· fuente | period: 20, source: "close" | DEMA |
smma | Smoothed Moving Average· fuente | period: 14, source: "close" | SMMA |
alma | Arnaud Legoux Moving Average· fuente | period: 9, offset: 0.85, sigma: 6, source: "close" | ALMA |
kama | Kaufman Adaptive Moving Average· fuente | period: 10, fast: 2, slow: 30, source: "close" | KAMA |
lsma | Least Squares Moving Average· fuente | period: 25, offset: 0, source: "close" | LSMA |
mcginley | McGinley Dynamic· fuente | period: 14, source: "close" | McGinley |
macross | MA Cross· fuente | 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 |
avgprice | Average Price | — | Average |
medprice | Median Price | — | Median |
typprice | Typical Price | — | Typical |
machannel | Moving Average Channel | upperLength: 20, lowerLength: 20, upperOffset: 0, lowerOffset: 0 | Upper, Lower |
hamming | Moving Average Hamming· fuente | period: 10, source: "close" | MA |
madouble | Moving Average Double· fuente | first: 20, second: 50, type: "sma", source: "close" | MA 1, MA 2 |
matriple | Moving Average Triple· fuente | first: 10, second: 20, third: 50, type: "sma", source: "close" | MA 1, MA 2, MA 3 |
volindex | Volatility Index | period: 7, mult: 3 | Stop |
tsf | Time Series Forecast | period: 14 | TSF |
wclose | Weighted Close | — | Weighted |
demark | DeMark Projected Range | — | Projected high, Projected low |
rainbow | Moving Average Rainbow | first: 10, step: 10, count: 10, exponential: 0 | MA 1, MA 2, MA 3, MA 4, MA 5, MA 6, MA 7, MA 8, MA 9, MA 10, MA 11, MA 12, MA 13, MA 14, MA 15, MA 16, MA 17, MA 18, MA 19, MA 20 |
candlepatterns | Candlestick Patterns | trendPeriod: 10, reversal: 1, continuation: 1, indecision: 0 | Bullish, Bearish, Indecision |
mtfma traza en el gráfico actual una media móvil de una temporalidad
superior; por ejemplo, la MA de 50 diaria sobre barras de 1h. Solo promedia los
cierres completados de la temporalidad superior, así que avanza en
escalones en cada límite y nunca se redibuja.
En un panel propio (86)
| id | Nombre | Parámetros predeterminados | Líneas | Niveles |
|---|---|---|---|---|
rsi | Relative Strength Index· fuente | period: 14, source: "close" | RSI | 30, 70 |
macd | MACD· fuente | 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· fuente | period: 12, source: "close" | ROC | 0 |
tsi | True Strength Index· fuente | longPeriod: 25, shortPeriod: 13, signalPeriod: 7, source: "close" | TSI, Signal | 0 |
cmf | Chaikin Money Flow | period: 20 | CMF | — |
stddev | Standard Deviation· fuente | 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· fuente | rsiPeriod: 3, streakPeriod: 2, rankPeriod: 100, source: "close" | CRSI | 10, 90 |
coppock | Coppock Curve· fuente | longRoc: 14, shortRoc: 11, wma: 10, source: "close" | Coppock | 0 |
kst | Know Sure Thing· fuente | 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· fuente | 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· fuente | 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· fuente | period: 9, source: "close" | CMO | -50, 0, 50 |
trix | TRIX· fuente | 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· fuente | rsiPeriod: 14, stochPeriod: 14, k: 3, d: 3, source: "close" | %K, %D | 20, 80 |
ppo | Percentage Price Oscillator· fuente | fast: 12, slow: 26, signal: 9, source: "close" | Histogram, PPO, Signal | 0 |
ac | Accelerator Oscillator | — | AC | — |
rmi | Relative Momentum Index· fuente | period: 20, momentum: 5, source: "close" | RMI | 30, 70 |
disparity | Disparity Index· fuente | 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· fuente | period: 20, stdDev: 2, source: "close" | %B | 0, 0.5, 1 |
bbw | Bollinger BandWidth· fuente | period: 20, stdDev: 2, source: "close" | BBW | — |
mom | Momentum· fuente | period: 10, source: "close" | MOM | 0 |
hv | Historical Volatility· fuente | period: 10, annual: 365, source: "close" | HV | — |
vo | Volume Oscillator | short: 5, long: 10 | Vol Osc | 0 |
ulcer | Ulcer Index· fuente | 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 |
asi | Accumulative Swing Index | limit: 10 | ASI | — |
advdecline | Advance/Decline | length: 10 | Ratio | — |
majority | Majority Rule | period: 14 | Majority | 50 |
chopzone | Chop Zone | — | Angle | — |
smiergodic | SMI Ergodic· fuente | short: 5, long: 20, signal: 5, source: "close" | Oscillator, Indicator, Signal | — |
po | Price Oscillator· fuente | short: 10, long: 21, source: "close" | PO | — |
volohlc | Volatility O-H-L-C | period: 10, annual: 365 | Volatility | — |
volzt | Volatility Zero Trend Close-to-Close | period: 10, annual: 365 | Volatility | — |
psy | Psychological Line | period: 10 | PSY | 25, 75 |
newpsy | New Psychological Line | period: 10 | New PSY | -50, 0, 50 |
vr | Volume Ratio | period: 20 | VR | 70, 150, 450 |
abratio | AB Ratio | period: 26 | A, B | 100 |
sonar | Sonar | period: 20, lookback: 9, signal: 9 | Sonar, Signal | 0 |
sigma | Sigma | period: 20 | Sigma | -2, 0, 2 |
vhf | Vertical Horizontal Filter | period: 28 | VHF | — |
rsquared | R-Squared | period: 14 | R² | — |
rwi | Random Walk Index | period: 14 | RWI High, RWI Low | 1 |
nvi | Negative Volume Index | signal: 255 | NVI, Signal | — |
pvi | Positive Volume Index | signal: 255 | PVI, Signal | — |
tr | True Range | — | TR | — |
iii | Intraday Intensity | period: 21 | III % | 0 |
volpct | Volume vs Average | period: 20 | Vol % | 0 |
volchange | Volume Change | — | Volume | — |
tradevalue | Trade Value | — | Value | — |
binarywave | Binary Wave | ma: 20, fast: 12, slow: 26, signal: 9, roc: 12, stoch: 14 | Wave | 0 |
sroc | Smoothed Rate of Change | ema: 13, roc: 21 | S-ROC | 0 |
voldelta (Volume Delta) aproxima la presión compradora/vendedora a
partir de OHLCV: las barras que cierran al alza suman volumen positivo y las
bajistas, negativo. mode: 0 es el histograma por barra y mode: 1 el delta acumulado. (Un delta real por tick necesita datos
de compra/venta de cada operación, que una serie OHLCV no incluye).
Indicadores de las pantallas de cotización asiáticas
Indicadores que los operadores de Corea, Japón y Vietnam esperan en sus pantallas de cotización: la Psychological Line (psy) y la New Psychological Line (newpsy), Volume Ratio (vr), AB Ratio (abratio), sonar, sigma, Binary Wave (binarywave), Trade Value (tradevalue) con Volume Change (volchange), el rango proyectado de DeMark (demark) y un arcoíris de medias (rainbow) de hasta 20 líneas. Trade Value es una estimación, cierre × volumen en cada barra; la cifra oficial de la bolsa llega en su feed.
chart.addIndicator('psy', { period: 10 }, 'bottom') // proporción de cierres al alza; marca 25 y 75
chart.addIndicator('vr', { period: 20 }, 'bottom') // volumen de días al alza frente a días a la baja
chart.addIndicator('tradevalue', {}, 'bottom') // cierre × volumen, en cada barra
chart.addIndicator('rainbow', { first: 10, step: 10, count: 10 }) // diez medias, de 10 a 100 barras Patrones de velas
64 patrones de una a cinco barras: dojis, martillos y estrellas fugaces, marubozu y belt hold; envolventes, harami, líneas penetrantes y nubes oscuras, pinzas, kicking; estrellas de la mañana y de la tarde, bebés abandonados, tres soldados y tres cuervos, tres dentro y tres fuera, huecos tasuki; three-line strike, tres métodos, mat hold, breakaway y ladder bottom. Un patrón de giro solo cuenta tras la tendencia que gira (el cierre anterior más allá de su media de 10 barras y del cierre de 10 barras antes, trendPeriod), y un cuerpo es largo o corto frente al cuerpo medio de las barras anteriores. El indicador dibuja una flecha bajo un patrón alcista y sobre uno bajista, con su nombre corto cuando las barras son lo bastante anchas; una barra que termina varios muestra el más largo. reversal, continuation e indecision (1 o 0) eligen los tipos.
chart.addIndicator('candlepatterns') // una flecha y el nombre en cada barra que termina uno
chart.addIndicator('candlepatterns', { indecision: 1 }) // también dojis y peonzas
import { detectCandlePatterns, CANDLE_PATTERNS } from '@tradecanvas/chart'
const found = detectCandlePatterns(bars, { patterns: ['bullishEngulfing', 'hammer'] })
// [{ index, time, pattern: { id, name, short, direction, kind, bars } }]
CANDLE_PATTERNS.length // 64 Tu propio indicador
Extiende IndicatorBase y declara lo que dibuja (plots),
la escala de su panel, sus niveles y sus parámetros; el gráfico lo dibuja,
escala su panel, etiqueta sus valores y lo muestra en la leyenda y la
configuración del widget sin que tengas que escribir código de renderizado.
Consulta la receta de indicador personalizado.
Paneles: redimensionar, contraer, maximizar, reordenar
Arrastra el divisor que hay sobre un panel para cambiar su tamaño. En ChartWidget cada panel tiene botones arriba a la derecha: subirlo o bajarlo, contraerlo hasta su cabecera y maximizarlo (los demás paneles se contraen y el panel de precio conserva una franja). Los diseños guardados conservan el tamaño, el orden y el estado contraído o maximizado de cada panel. Lo mismo desde código:
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 En ChartWidget, haz clic derecho en un panel para darle su propia escala logarítmica, invertida o porcentual.
Mover un indicador a otro panel
Un indicador puede unirse al panel de otro indicador (y entonces comparte la escala de ese panel), tener un panel propio o volver al panel de precio. Cuando deja un panel que era suyo, los demás indicadores se quedan en él (el siguiente indicador en panel pasa a ser su dueño), y los que leen sus líneas lo siguen. En ChartWidget, el botón ⋯ de una fila de la leyenda ofrece el panel de arriba, el de abajo, un panel nuevo y el panel de precio.
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 Deshacer y plantillas
Añadir, quitar, editar y mover indicadores son pasos que se pueden deshacer, en el mismo historial que los dibujos (Ctrl/⌘ Z, Ctrl/⌘ Shift Z); un indicador que vuelve al deshacer conserva su propio id, así que las alertas sobre sus líneas siguen coincidiendo. Una ráfaga de cambios en un mismo indicador (un color arrastrado, un periodo escrito) es un solo paso. Al cargar un diseño, el historial empieza de cero.
Los indicadores se pueden tomar y volver a poner en bloque, que es lo que hacen las plantillas de indicadores de ChartWidget: Guardar indicadores como plantilla… en el menú Indicadores los guarda (parámetros, estilo, niveles, paneles) con un nombre, y elegir una plantilla los pone en lugar de los del gráfico, como un solo paso de deshacer.
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 Cálculo fuera del gráfico
IndicatorWorkerHost calcula un indicador a partir de las barras con
los mismos mensajes que usaría un Web Worker. El script del worker todavía no
forma parte de los paquetes publicados, así que pasa null y registra
los plugins para calcular en el mismo hilo (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)