Technical Indicators
ApexStock ships more than twenty built-in technical indicators. They fall into two groups: overlays, drawn directly on the price chart, and oscillators, rendered in their own panel below the main chart.
Overlays vs oscillators
- Overlays share the price scale and sit on top of the candles. Several can be active at once.
- Oscillators each get their own y-scale and pane. Several can be active at once too: the indicators dropdown treats them as independent toggles, so RSI, MACD and Volume stack together. Each pane is added without evicting the others, and the panes share the indicator area, resizing as panes come and go.
Panes divide the indicator area in proportion to a relative heightRatio rather than evenly. See Pane heights.
Enabling indicators up front
Declare which indicators are available (and enabled) through plotOptions.stockChart.indicators. Pass an object keyed by indicator name:
const apexStock = new ApexStock(document.querySelector('#chart'), {
chart: { height: 600 },
series: [{ name: 'ACME', data: candles }],
plotOptions: {
stockChart: {
indicators: {
'moving average': { enabled: true },
'bollinger bands': { enabled: true },
rsi: { enabled: false },
macd: { enabled: true },
},
},
},
})
apexStock.render()
Or pass an array of names to enable exactly those:
plotOptions: {
stockChart: {
indicators: ['rsi', 'macd', 'bollinger bands'],
},
}
Toggling at runtime
Add or update an indicator with updateIndicator() and remove it with removeIndicator(), using the indicator key. Both preserve the current zoom state:
// Overlays stack
apexStock.updateIndicator('moving average')
apexStock.updateIndicator('bollinger bands')
// So do oscillators: each gets its own pane
apexStock.updateIndicator('rsi')
apexStock.updateIndicator('macd') // RSI stays; MACD gets a second pane
// Remove one
apexStock.removeIndicator('bollinger bands')
updateIndicator(key, params) also sets an active indicator's params in place, and never toggles it off:
apexStock.updateIndicator('rsi', { period: 21 })
setIndicatorParams(key, params) is the same operation under a name that says so. listIndicators() and getIndicator(key) introspect what is available and each one's params.
Indicator keys are case-insensitive. Display labels are title-cased per word ("Bollinger Bands", "Stochastic Oscillator"), which is what appears in the dropdown and in the label field of listIndicators() and getIndicator(). Keys and series names are unaffected.
indicatorToggle fires when one is added or removed:
apexStock.on('indicatorToggle', ({ key, active }) => {})
Overlays
Drawn on the main price chart. Multiple allowed.
| Indicator | Key | Description |
|---|---|---|
| Moving Average | "moving average" | Simple moving average line |
| Exponential Moving Average | "exponential moving average" | EMA line with exponential weighting |
| VWAP | "vwap" | Volume-weighted average price, cumulative from the first bar. source is "hlc3" (the typical price, default) or "close" |
| Bollinger Bands | "bollinger bands" | Upper, middle, and lower volatility bands |
| Donchian Channels | "donchian channels" | Highest high and lowest low over a trailing period (default 20) |
| Keltner Channels | "keltner channels" | An EMA midline offset by multiplier * ATR. emaPeriod 20, atrPeriod 10, multiplier 2 |
| Fibonacci Retracements | "fibonacci retracements" | 0%, 23.6%, 38.2%, 50%, 61.8%, 100% levels |
| Linear Regression | "linear regression" | Linear regression trend line |
| Ichimoku Cloud Indicator | "ichimoku cloud indicator" | Full Ichimoku system with cloud and lines |
Oscillators
Each is rendered in its own stacked pane below the chart. Several can be active at once.
| Oscillator | Key | Description |
|---|---|---|
| RSI | "rsi" | Relative Strength Index (0-100) |
| MACD | "macd" | Moving Average Convergence Divergence with signal line |
| Volumes | "volumes" | Volume bars (needs v on the candles) |
| Price Volume Trend | "price volume trend" | Cumulative PVT |
| Stochastic Oscillator | "stochastic oscillator" | %K and %D lines |
| Standard Deviation Indicator | "standard deviation indicator" | Price volatility measure |
| Average Directional Index | "average directional index" | ADX trend strength |
| ATR | "atr" | Average True Range, Wilder-smoothed. period default 14 |
| Chaikin Oscillator | "chaikin oscillator" | Volume-based momentum |
| Commodity Channel Index | "commodity channel index" | CCI overbought/oversold |
| Trend Strength Index | "trend strength index" | TSI momentum |
| Accelerator Oscillator | "accelerator oscillator" | Acceleration/deceleration of price |
| Bollinger Bands %B | "bollinger bands %b" | Position within the bands (0-1) |
| Bollinger Bands Width | "bollinger bands width" | Band width (volatility) |
The analysis pane
The indicators dropdown carries one more entry, under an Analysis heading rather than mixed in with the technical indicators:
apexStock.updateIndicator('drawdown')
It is an ordinary registry entry, so it stacks with the oscillator panes and shares their zoom, but it measures how far below the running peak the price is rather than reading a technical signal. See Range Statistics and Drawdown.
Indicators and volume
Volume-based indicators (Volumes, Price Volume Trend, Chaikin Oscillator, and VWAP) require a v value on each candle. See Data Format. VWAP is the tolerant one: a volume-less bar contributes zero, so its line uses the price until volume accrues.
Indicators and streaming
When you feed live bars with appendData, every active overlay and oscillator updates incrementally instead of recomputing from scratch, so indicators stay exact as new data arrives. Each built-in ships a streaming twin, VWAP and the three channel indicators included; Keltner's composes the EMA and ATR steppers.
Registering your own
ApexStock.registerIndicator(name, def) adds an indicator globally, either declaratively ({ type, calc }) or in the advanced form ({ kind, build, apply, remove }), with an optional stream twin so it stays exact under appendData. A registered indicator appears in listIndicators() and the dropdown like a built-in.
Computing values without rendering
If you need the raw indicator series (for example, to drive your own UI or alerts) rather than a rendered pane, ApexStock also exposes the underlying calculation methods. See Computing Indicator Values.