API Reference¶

`init(wasmUrl?)`¶

Re-exported from tulip-rs-wasm. Initialises the WASM module. Must be called once before any addIndicator() calls.

function init(wasmUrl?: string | URL | Request): Promise<void>

Parameter	Type	Description
`wasmUrl`	`string \\| URL \\| Request \\| undefined`	URL of the `.wasm` binary. Omit when using a bundler (Vite, webpack) — the asset is resolved automatically. Required when loading from a CDN or serving files without a bundler.

Returns: Promise<void> — resolves when the WASM module is ready.

Example:

// Bundler — no URL needed
await init();

// CDN
await init('https://cdn.jsdelivr.net/npm/tulip-rs-wasm@0.1.11/pkg/tulip_rs_wasm_bg.wasm');

`addIndicator(chart, sourceSeries, name, data, options, addOptions?)`¶

Add a tulip-rs technical indicator to a Lightweight Charts v5 chart. Routes automatically to an overlay primitive or an oscillator pane based on the indicator's displayType.

function addIndicator(
  chart:        IChartApi,
  sourceSeries: ISeriesApi<keyof SeriesOptionsMap>,
  name:         string,
  data:         OhlcvBar[],
  options:      number[],
  addOptions?:  AddIndicatorOptions,
): IndicatorHandle

Parameter	Type	Description
`chart`	`IChartApi`	The LWC chart instance (return value of `createChart()`).
`sourceSeries`	`ISeriesApi<...>`	The primary price series. Overlay primitives attach to this series; its price scale is used for Y-axis coordinate conversion.
`name`	`string`	Lower-case indicator name, e.g. `'sma'`, `'rsi'`, `'bbands'`. See Indicators for the full list.
`data`	`OhlcvBar[]`	Full OHLCV dataset. The `volume` field is required for volume-based indicators (AD, OBV, MFI, KVO, ADOSC, EMV, NVI, PVI, VWMA, VOSC).
`options`	`number[]`	Numeric indicator parameters in the order the indicator expects (e.g. `[14]` for RSI period, `[20, 2]` for BBands period and stddev).
`addOptions`	`AddIndicatorOptions`	Visual and pane configuration. All fields are optional.

Returns: IndicatorHandle

Throws: - If name is 'candlestick' — the candlestick pattern indicator returns objects, not numeric series, and is not supported. - If name is unknown — an informative error with the indicator name is thrown.

Example:

// Overlay
const sma = addIndicator(chart, candles, 'sma', ohlcv, [20]);

// Overlay with options
const bb = addIndicator(chart, candles, 'bbands', ohlcv, [20, 2], {
  colors:   ['#ef5350', '#2196F3', '#ef5350'],
  fillBand: true,
});

// Oscillator
const rsi = addIndicator(chart, candles, 'rsi', ohlcv, [14], {
  colors: ['#9C27B0'],
});

`IndicatorHandle`¶

Returned by every addIndicator() call. Use it to update data or remove the indicator.

type IndicatorHandle = {
  remove():          void;
  setData(data: OhlcvBar[]): void;
  appendBar(bar: OhlcvBar):  void;
};

`.remove()`¶

Remove the indicator from the chart and free all associated resources.

Overlays: detaches the ISeriesPrimitive from the source series.
Oscillators: removes all LineSeries / HistogramSeries from the chart; releases the allocated pane (unless you specified a custom paneIndex in AddIndicatorOptions).

const sma = addIndicator(chart, candles, 'sma', ohlcv, [20]);
sma.remove();

`.setData(data)`¶

Replace the full dataset and recompute the indicator from scratch. The indicator remains on the same pane / primitive — only the underlying data and state are reset.

Use this when the user changes the symbol or timeframe:

const sma = addIndicator(chart, candles, 'sma', ohlcv, [20]);

async function onSymbolChange(newOhlcv) {
  candles.setData(newOhlcv);
  sma.setData(newOhlcv);  // recomputes on the new dataset
}

`.appendBar(bar)`¶

Append one new bar and update the indicator incrementally using the stored State object. O(1) per call — does not reprocess history.

const sma = addIndicator(chart, candles, 'sma', ohlcv, [20]);

ws.onmessage = (event) => {
  const bar = JSON.parse(event.data);
  candles.update(bar);
  sma.appendBar(bar);
};

During the warmup period (i.e. before the indicator has accumulated enough bars to produce output), appendBar() feeds the bar to the internal state but draws nothing. Once warmup is complete, each call produces one new chart point.

`AddIndicatorOptions`¶

Optional configuration passed as the sixth argument to addIndicator(). All fields are optional.

type AddIndicatorOptions = {
  colors?:      string[];
  fillBand?:    boolean;
  lineWidth?:   number;
  paneIndex?:   number;
  renderStyle?: 'line' | 'dots';
  dotRadius?:   number;
  upColor?:     string;
  downColor?:   string;
};

`colors`¶

One CSS colour string per output series. Accepts any valid CSS colour — hex, rgb(), rgba(), named colours.

If fewer colours are provided than there are output series, the remaining series cycle through the built-in default palette:

['#2196F3', '#ef5350', '#4CAF50', '#FF9800', '#9C27B0', '#00BCD4', '#FF5722', '#607D8B']

// Single output
{ colors: ['#FFD700'] }

// Multi-output (BBands)
{ colors: ['#ef5350', '#2196F3', '#ef5350'] }

// Semi-transparent
{ colors: ['rgba(33, 150, 243, 0.7)'] }

`fillBand`¶

boolean — shade the area between the first and last output series with a semi-transparent fill. Drawn behind candlesticks.

Intended for band-style indicators (Bollinger Bands, Donchian Channels, etc.). Default: false.

const bb = addIndicator(chart, candles, 'bbands', ohlcv, [20, 2], {
  fillBand: true,
});

`lineWidth`¶

number — line width in pixels for LineSeries outputs. Default: 1.

Has no effect on overlay primitives (which always use lineWidth = 1 on the canvas) or on HistogramSeries outputs.

const sma = addIndicator(chart, candles, 'sma', ohlcv, [20], {
  lineWidth: 2,
});

`paneIndex`¶

number — force the oscillator into a specific pane instead of allocating the next free pane automatically. Has no effect on overlay indicators.

When you specify paneIndex, the pane is not released when remove() is called — pane lifecycle becomes your responsibility.

Use this to place two oscillators in the same pane:

const rsi      = addIndicator(chart, candles, 'rsi',      ohlcv, [14]);    // auto → pane 1
const stochrsi = addIndicator(chart, candles, 'stochrsi', ohlcv, [14], {
  paneIndex: 1,   // share RSI's pane
  colors:    ['#FF9800'],
});

`renderStyle`¶

'line' | 'dots' — choose between a connected line and a scatter of isolated dots for overlay primitives. Default: 'line'.

Set to 'dots' for indicators where discrete per-bar points are more meaningful than a connected curve. PSAR selects 'dots' automatically — you do not need to set this unless you want dot rendering for another overlay.

// Explicit dots rendering on any overlay
const psar = addIndicator(chart, candles, 'psar', ohlcv, [0.02, 0.2], {
  renderStyle: 'dots',
});

`dotRadius`¶

number — radius of each dot in pixels when renderStyle is 'dots'. Default: 3.

const psar = addIndicator(chart, candles, 'psar', ohlcv, [0.02, 0.2], {
  dotRadius: 5,
});

`upColor`¶

string — CSS colour for dots or lines rendered during an uptrend (SAR below price). Used by PSAR for per-point green/red colouring. Accepts any valid CSS colour.

Default: '#26a69a' (green).

const psar = addIndicator(chart, candles, 'psar', ohlcv, [0.02, 0.2], {
  upColor:   '#4CAF50',
  downColor: '#ef5350',
});

`downColor`¶

string — CSS colour for dots or lines rendered during a downtrend (SAR above price). Default: '#ef5350' (red).

Used together with upColor — see the example above.

Rendering Behaviour Notes¶

Auto-selected rendering modes¶

Two indicator whitelists override the default line rendering automatically — you do not need to set renderStyle or any special option:

Whitelist	Indicators	Effect
`DOT_RENDER_INDICATORS`	`psar`	Renders as isolated dots with `upColor`/`downColor` per-point colouring
`HORIZONTAL_LINE_INDICATORS`	`pivotpoint`	Renders as full-width dashed horizontal lines across the price pane with labelled pills

Last-value lines¶

Indicator series (overlay primitives and oscillator series) have priceLineVisible: false and lastValueVisible: false set by default. This means the floating dashed horizontal line that Lightweight Charts normally draws at the last data point is suppressed for indicator outputs — keeping the chart uncluttered when multiple indicators are active.

`OhlcvBar`¶

The data type for OHLCV bars, used by addIndicator(), setData(), and appendBar().

type OhlcvBar = {
  time:    Time;    // LWC Time — string ('2024-01-02'), UTCTimestamp (number), or BusinessDay
  open:    number;
  high:    number;
  low:     number;
  close:   number;
  volume?: number;  // required for volume-based indicators
};

Time is the Lightweight Charts time type — the same type you use with series.setData(). All three LWC time formats are supported: ISO date strings ('2024-01-02'), Unix timestamps in seconds, and { year, month, day } objects.

Exports¶

All public types and the two function exports are available from the package root:

import {
  init,            // function — initialise WASM
  addIndicator,    // function — add an indicator
} from 'tulip-rs-lwc';

import type {
  OhlcvBar,             // input bar type
  IndicatorHandle,      // handle returned by addIndicator()
  AddIndicatorOptions,  // visual/pane config
} from 'tulip-rs-lwc';

API Reference¶

init(wasmUrl?)¶

addIndicator(chart, sourceSeries, name, data, options, addOptions?)¶

IndicatorHandle¶

.remove()¶

.setData(data)¶

.appendBar(bar)¶

AddIndicatorOptions¶

colors¶

fillBand¶

lineWidth¶

paneIndex¶

renderStyle¶

dotRadius¶

upColor¶

downColor¶