Docs·Charting Library·Core API

Indicators

Enable and configure the 18+ built-in indicators — RSI, MACD, VRVP, CVD, TPO, Funding, Open Interest, and more. Plus a path to ship your own indicators with the DeltaDSL scripting layer.

The engine ships 18+ indicators inline. Each one is a single method call away — no plugin installs, no peer dependencies, no version skew. The full list, the enable/configure pattern, and the script-it-yourself path for indicators we don't ship.

The enable pattern

Every shipped indicator follows the same shape:

JavaScript
chart.enableXXX()         // turn on
chart.disableXXX()        // turn off
chart.isXXXEnabled()      // bool
chart.setXXXPeriod(n)     // primary tuning knob (varies per indicator)
chart.setXXXShowYYY(b)    // toggle sub-features (signals, divergence, …)
chart.setXXXColor(hex)    // visual override

If you've enabled RSI before, you've enabled all the others. Pick whichever you need.

RSI — Relative Strength Index

The single most-requested indicator in any trading product. Ships with built-in EMA / WMA overlays, divergence detection, level lines, and trap signals.

JavaScript
chart.enableRsi()
chart.setRsiPeriod(14)              // default 14
chart.setRsiShowEma(true)           // overlay EMA on RSI line
chart.setRsiShowWma(false)          // overlay WMA on RSI line
chart.setRsiShowSignals(true)       // pullback / mean-reversion markers
chart.setRsiShowDivergence(true)    // bullish / bearish divergence arrows
chart.setRsiShowTraps(false)        // trap-condition markers
chart.setRsiShowLevels(true)        // 30 / 70 lines
chart.setRsiShowOnChart(false)      // also render the signal arrows on the main candle pane

To turn RSI off:

JavaScript
chart.disableRsi()

MACD

JavaScript
chart.enableMacd()
chart.setMacdFast(12)
chart.setMacdSlow(26)
chart.setMacdSignal(9)
chart.setMacdShowHistogram(true)
chart.setMacdShowDivergence(true)

Stochastic

JavaScript
chart.enableStoch()
chart.setStochKPeriod(14)
chart.setStochDPeriod(3)
chart.setStochSmoothing(3)
chart.setStochShowLevels(true)

Bollinger Bands

JavaScript
chart.enableBollinger()
chart.setBollingerPeriod(20)
chart.setBollingerStdDev(2.0)
chart.setBollingerShowFill(true)

VRVP — Visible Range Volume Profile

Volume profile across the currently-visible bars, rendered as a histogram on the right edge of the chart. Updates as the user pans / zooms.

JavaScript
chart.enableVrvp()
chart.setVrvpBuckets(80)                // number of price buckets
chart.setVrvpShowDelta(true)            // bid vs ask split per bar
chart.setVrvpHighlightPoc(true)         // mark the VRPOC row
chart.setVrvpHighlightValueArea(true)   // shade the 70 % value area

CVD — Cumulative Volume Delta

Running sum of bid-vs-ask volume across the visible bars. Rises on net buying pressure, falls on net selling pressure. The classic divergence-with-price tool.

JavaScript
chart.enableCvd()
chart.setCvdShowDivergence(true)
chart.setCvdResetOn('session')   // 'session' | 'never' | 'day'

TPO — Time Price Opportunity (Market Profile)

The classic market-profile letters showing time-at-price for each session. Identifies value area, single prints, and excess at the extremes.

JavaScript
chart.enableTpo()
chart.setTpoSessionStart('00:00')   // UTC session boundary
chart.setTpoLetterPeriod('30m')     // letter granularity
chart.setTpoShowValueArea(true)

Funding Rate

Overlays the realised funding rate as a histogram on its own subplot. Pulls from your data feed — you push the funding-rate stream to the chart with setFundingRate(timestamps, rates).

JavaScript
chart.enableFunding()
chart.setFundingRate(timestamps, rates)
chart.setFundingShowZeroLine(true)

Open Interest

Same shape as funding — overlay an OI series on its own pane. Diverging OI vs. price is one of the more useful directional flags for perpetual markets.

JavaScript
chart.enableOpenInterest()
chart.setOpenInterest(timestamps, oiSeries)

Smart Ranges / EMA Structure

Higher-level structural indicators bundled in this library:

JavaScript
chart.enableSmartRanges()        // identifies consolidation ranges automatically
chart.enableEmaStructure()       // multi-EMA trend-state overlay
chart.setEmaStructureLengths([20, 50, 200])

Whales screener

A real-time large-trade highlighter. Marks the chart wherever an outsized trade lands, sized to the local average trade size.

JavaScript
chart.enableWhales()
chart.setWhalesMinNotional(50000)    // mark trades >= $50k notional
chart.setWhalesShowOnChart(true)

Tick Bookmap (per-trade ladder)

A vertical price ladder on the right edge showing every tick in the visible window. Different from the orderbook heatmap (which shows resting orders) — this shows aggressors.

JavaScript
chart.enableTickBookmap()
chart.setTickBookmapPriceRange(20)   // ± $20 around current price

DOM Ladder

A classic CME-style price ladder. Bid and ask resting sizes at each price, updating in real-time. Renders on the same canvas alongside the chart.

JavaScript
chart.enableDomLadder()
chart.setDomLadderRows(40)

Indicator visibility

chart.setIndicatorEnabled(name, enabled)

Generic toggle that takes an indicator name. Equivalent to the dedicated enableXxx / disableXxx calls, useful when iterating a list:

JavaScript
const enabledIndicators = ['rsi', 'macd', 'vrvp']
for (const name of enabledIndicators) {
  chart.setIndicatorEnabled(name, true)
}

chart.setIndicatorsVisible(visible)

Hide all indicator subpanes at once without disabling them. Useful for screenshot / "show me just candles" modes.

chart.setIndicatorCalcOnEveryTick(name, on)

Some indicators (RSI, MACD) recompute on every real-time tick by default — useful for live trading, expensive for replay. Set false to recompute only at bar close.

Custom indicators — DeltaDSL

For anything the built-in list doesn't cover, the library ships a scripting layer called DeltaDSL: a closed-sandbox interpreter that lets your users write their own indicators in a Pine-Script-style mini-language. Your scripts can plot lines, fill bands, place markers, and draw labels — no JavaScript escape hatch, no I/O surface, no security surface to audit.

JavaScript
import { createCustomIndicatorManager } from '@mrd/chart-engine'

const customs = createCustomIndicatorManager(chart)

customs.compile(`
  @input length = 14
  @input src = close

  ma = sma(src, length)
  upper = ma + 2 * stdev(src, length)
  lower = ma - 2 * stdev(src, length)

  plot(upper, "Upper", color = "amber")
  plot(ma,    "MA",    color = "white")
  plot(lower, "Lower", color = "amber")
`)

DeltaDSL is intentionally constrained — see DeltaDSL invariants for the design rationale. Production-grade safety with zero-trust user scripts. If you want full JavaScript freedom, that's not what this layer is for; if you want a safe way to let your customers write indicators against your data, this is exactly what it's for.

Common pitfalls

Indicator subpane is empty after enable. Indicators that need a price series (RSI, MACD, Stoch, …) calculate from the loaded klines. If you call enableRsi() before setKlines(), the subpane shows but has no data. Order matters: setKlines first, then enableXxx.

Indicator recomputes feel laggy. You have setIndicatorCalcOnEveryTick(name, true) for a heavy indicator. RSI and CVD calc-on-tick is cheap. VRVP and TPO are not — leave them on the bar-close default.

Funding / OI series doesn't show. Funding and OI are external time series — they need explicit data via setFundingRate(…) / setOpenInterest(…) before the indicator has anything to draw. enableFunding() alone produces an empty subplot.

Next