Stock Chart

width

Chart width in pixels. If the container width changes, update width from a ResizeObserver.

height

Chart height in pixels. Allow space for axes, titles, and the legend.

brandLogo

The default is the Syidax symbol and wordmark. With the Pro chart.branding entitlement, set none to remove it or provide a PNG, JPEG, or WebP data URL to replace it.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

brandPosition

The corner where the logo is anchored. Community and Pro both support all four corners, using the same position on screen and in image exports.

data

Chronological OHLCV records.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

session

24x7 or a trading session.

• StockSessionInput

  Type definition

visibleFrom

Visible bar range (indices; defaults to everything).

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

visibleTo

Set as an HTML attribute or JavaScript property. type: number.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

showNavigator

Show the full-tape navigator + scrollbar under the time axis ().

showRangeSelector

Show the 1M/3M/6M/YTD/1Y/All + resolution button rows ().

resolution

Tape resolution: 1d raw / 1w / 1M calendar roll-ups.

• StockResolution

  Type definition

dataGrouping

View-density grouping: auto (default) / off / a forced factor.

historyLoader

Older-history provider (): (oldestTime, count) => bars. Called automatically when the window nears the tape head; an empty return marks the history exhausted.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

historyThreshold

Bars from the head that trigger a history load (default 30).

panes

Pane stack (): [{id, weight, label?}], price first by convention. Weights are proportions; separators drag live.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

• PaneSpecInput

  Type definition

seriesStyle

How prices are drawn.

• StockSeriesStyle

  Type definition

• DerivedStockStyle

  Type definition

brickSize

Renko brick size in price units (default auto — close range/50, nice).

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

reversalPct

Kagi reversal, percent (default 4).

boxSize

Point & Figure box size (default auto) and reversal boxes (default 3).

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

reversalBoxes

Set as an HTML attribute or JavaScript property. type: number.

lineBreakCount

Line Break lookback (default 3-line break).

upColor

Up/down candle colours (close ≥ open → up).

downColor

Set as an HTML attribute or JavaScript property. type: string.

baselineValue

Baseline anchor for series-style="baseline" (default first visible close).

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

lineColor

Line/area/hilo ink.

priceScaleMode

Right-scale space: linear (default) / log / percent / indexed.

referenceLines

Reference lines, comma list: current,previous-close,high,low,bid,ask.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

bid

Quotes for the bid/ask reference lines.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

ask

Set as an HTML attribute or JavaScript property. type: number.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

crosshair

Crosshair + OHLC legend on hover ().

showLegend

Set as an HTML attribute or JavaScript property. type: boolean.

compareSymbols

Compare overlays (): [{id, name?, color?, data}]. Any active compare FORCES the percent scale — every series reads vs its own first visible close.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

• CompareSymbolInput

  Type definition

flags

Events with time, text, and title.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

• StockFlagInput

  Type definition

indicators

Indicator instances (): [{kind, params?, color?, linkedTo?, pane?}] against the registry (registerIndicator). Overlay kinds paint into the price pane; pane kinds own a synthesized pane.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

• StockIndicatorInput

  Type definition

drawings

Drawing seed (): [{tool, anchors: [{time, price}], style?}] — DATA-coordinate anchors survive pan/zoom/grouping/resolution. Assigning the prop resets the document (and its undo history); the method surface mutates it with full undo/redo.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

• StockDrawingInput

  Type definition

showToolbar

Show the left drawing-tools toolbar ().

exportScale

PNG export pixel scale ().

locale

BCP-47 locale (): month labels + price/P&L number formats.

trades

Executed trades (): [{time, side: buy|sell, price, quantity?}].

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

• StockTradeInput

  Type definition

positions

Open positions (): [{side: long|short, entryPrice, quantity}] — live P&L badges.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

• StockPositionInput

  Type definition

chartTitle

The title inside the chart. Explain the data's unit and meaning alongside it.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

chartSubtitle

The subtitle inside the chart.

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

rendered

Emits rendering results in detail when chart drawing completes.

Event name: rendered. Names are case-sensitive. Read the payload from detail on CustomEvent<{ bars: number; visibleBars: number; renderMs: number }>.

chart.addEventListener('rendered', event => {
  console.log(event.detail); // { bars: number; visibleBars: number; renderMs: number }
});

paneLayoutChanged

The pane stack changed (drag, add/remove/reorder, weight set).

Event name: paneLayoutChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<{ panes: Array<{ id: string; weight: number }> }>.

chart.addEventListener('paneLayoutChanged', event => {
  console.log(event.detail); // { panes: Array<{ id: string; weight: number }> }
});

visibleRangeChanged

The visible window changed (navigator/scrollbar; fires on release).

Event name: visibleRangeChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<{ from: number; to: number }>.

chart.addEventListener('visibleRangeChanged', event => {
  console.log(event.detail); // { from: number; to: number }
});

rangeSelected

A range button was applied.

Event name: rangeSelected. Names are case-sensitive. Read the payload from detail on CustomEvent<{ range: StockRangeKey; from: number; to: number }>.

chart.addEventListener('rangeSelected', event => {
  console.log(event.detail); // { range: StockRangeKey; from: number; to: number }
});

• StockRangeKey

  Type definition

resolutionChanged

The resolution changed.

Event name: resolutionChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<{ resolution: StockResolution }>.

chart.addEventListener('resolutionChanged', event => {
  console.log(event.detail); // { resolution: StockResolution }
});

• StockResolution

  Type definition

historyRequested

A history load started / finished.

Event name: historyRequested. Names are case-sensitive. Read the payload from detail on CustomEvent<{ oldestTime: number; count: number }>.

chart.addEventListener('historyRequested', event => {
  console.log(event.detail); // { oldestTime: number; count: number }
});

historyLoaded

CustomEvent.detail type: { added: number; exhausted: boolean }. Event names are case-sensitive.

Event name: historyLoaded. Names are case-sensitive. Read the payload from detail on CustomEvent<{ added: number; exhausted: boolean }>.

chart.addEventListener('historyLoaded', event => {
  console.log(event.detail); // { added: number; exhausted: boolean }
});

crosshairMoved

The crosshair moved to a bar (null on leave).

Event name: crosshairMoved. Names are case-sensitive. Read the payload from detail on CustomEvent<{ index: number; time: number; price: number } | null>.

chart.addEventListener('crosshairMoved', event => {
  console.log(event.detail); // { index: number; time: number; price: number } | null
});

compareChanged

The compare set changed.

Event name: compareChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<{ ids: string[] }>.

chart.addEventListener('compareChanged', event => {
  console.log(event.detail); // { ids: string[] }
});

flagClick

A flag was clicked / hovered (null on hover leave).

Event name: flagClick. Names are case-sensitive. Read the payload from detail on CustomEvent<{ id: string; time: number; text: string; title?: string }>.

chart.addEventListener('flagClick', event => {
  console.log(event.detail); // { id: string; time: number; text: string; title?: string }
});

flagHover

CustomEvent.detail type: { id: string; time: number; text: string; title?: string } | null. Event names are case-sensitive.

Event name: flagHover. Names are case-sensitive. Read the payload from detail on CustomEvent<{ id: string; time: number; text: string; title?: string } | null>.

chart.addEventListener('flagHover', event => {
  console.log(event.detail); // { id: string; time: number; text: string; title?: string } | null
});

indicatorsChanged

The indicator set changed (add/remove/update).

Event name: indicatorsChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<{ ids: string[] }>.

chart.addEventListener('indicatorsChanged', event => {
  console.log(event.detail); // { ids: string[] }
});

drawingsChanged

The drawing document changed (add/update/move/remove/undo/redo/load).

Event name: drawingsChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<{ count: number; canUndo: boolean; canRedo: boolean }>.

chart.addEventListener('drawingsChanged', event => {
  console.log(event.detail); // { count: number; canUndo: boolean; canRedo: boolean }
});

drawingSelect

A drawing was selected (null on deselect).

Event name: drawingSelect. Names are case-sensitive. Read the payload from detail on CustomEvent<{ id: string } | null>.

chart.addEventListener('drawingSelect', event => {
  console.log(event.detail); // { id: string } | null
});

toolChanged

The active placement tool changed (null = the cursor).

Event name: toolChanged. Names are case-sensitive. Read the payload from detail on CustomEvent<{ tool: string | null }>.

chart.addEventListener('toolChanged', event => {
  console.log(event.detail); // { tool: string | null }
});

tickApplied

A live tick was applied (appended = a new bar opened).

Event name: tickApplied. Names are case-sensitive. Read the payload from detail on CustomEvent<{ appended: boolean; time: number; close: number; bars: number }>.

chart.addEventListener('tickApplied', event => {
  console.log(event.detail); // { appended: boolean; time: number; close: number; bars: number }
});

tradeClick

A trade marker was clicked.

Event name: tradeClick. Names are case-sensitive. Read the payload from detail on CustomEvent<{ id: string; time: number; side: 'buy' | 'sell'; price: number; quantity?: number }>.

chart.addEventListener('tradeClick', event => {
  console.log(event.detail); // { id: string; time: number; side: 'buy' | 'sell'; price: number; quantity?: number }
});

templateApplied

A template was imported (applied names the fields that landed).

Event name: templateApplied. Names are case-sensitive. Read the payload from detail on CustomEvent<{ applied: string[] }>.

chart.addEventListener('templateApplied', event => {
  console.log(event.detail); // { applied: string[] }
});

exported

An export finished (png | svg | csv).

Event name: exported. Names are case-sensitive. Read the payload from detail on CustomEvent<{ format: string; filename: string }>.

chart.addEventListener('exported', event => {
  console.log(event.detail); // { format: string; filename: string }
});

addCompare

Add a compare overlay (duplicate ids replace).

addCompare(symbol: CompareSymbolInput): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

• CompareSymbolInput

  Type definition

removeCompare

Remove a compare overlay by id.

removeCompare(id: string): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

addIndicator

Add an indicator instance (an explicit duplicate id replaces). A missing id is minted HERE and persisted into the spec, so later removals never re-number method-added instances.

addIndicator(spec: StockIndicatorInput): Promise<StockIndicatorInput>

Return type: Promise<StockIndicatorInput>. Call the method after element registration and await its Promise result.

• StockIndicatorInput

  Type definition

removeIndicator

Remove an indicator by resolved id (its synthesized pane goes with it).

removeIndicator(id: string): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

updateIndicator

Merge params into an instance (by resolved id).

updateIndicator(id: string, params: Record<string, number | string>): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

getIndicators

Resolved indicator list (serialisable — no definition objects).

getIndicators(): Promise<Array<{
    id: string; kind: string; params: Record<string, number>; linkedTo: string; paneId: string | null; label: string;
  }>>

Return type: `Promise<Array<{ id: string; kind: string; params: Record<string, number>; linkedTo: string; paneId: string | null; label: string; }>>`. Call the method after element registration and await its Promise result.

defineIndicator

Register a CUSTOM indicator definition at runtime () — the component-level gate over the sy/stock registerIndicator core: strictly validated, re-register replaces, existing instances of the kind re-compute on the forced re-render. Definitions live in the page-global registry (every chart on the page sees them).

defineIndicator(definition: IndicatorDefinition): Promise<{ ok: boolean; errors: string[] }>

Return type: Promise<{ ok: boolean; errors: string[] }>. Call the method after element registration and await its Promise result.

• IndicatorDefinition

  Type definition

undefineIndicator

Remove a definition; live instances of the kind resolve away.

undefineIndicator(kind: string): Promise<{ removed: boolean }>

Return type: Promise<{ removed: boolean }>. Call the method after element registration and await its Promise result.

getIndicatorKinds

Registered indicator kinds (built-ins + custom), sorted.

getIndicatorKinds(): Promise<string[]>

Return type: Promise<string[]>. Call the method after element registration and await its Promise result.

getIndicatorValues

Computed columns for one instance over the current render tape.

getIndicatorValues(id: string): Promise<Record<string, Array<number | null>> | null>

Return type: Promise<Record<string, Array<number | null>> | null>. Call the method after element registration and await its Promise result.

addDrawing

Add a drawing (data-coordinate anchors); returns it with the minted id.

addDrawing(input: StockDrawingInput): Promise<StockDrawing | null>

Return type: Promise<StockDrawing | null>. Call the method after element registration and await its Promise result.

• StockDrawing

  Type definition

• StockDrawingInput

  Type definition

updateDrawing

Merge a patch (anchors/style/meta/visible/locked) into a drawing.

updateDrawing(id: string, patch: Partial<Omit<StockDrawing, 'id'>>): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

• StockDrawing

  Type definition

moveDrawing

Translate a drawing by data-space deltas (locked drawings hold).

moveDrawing(id: string, deltaTime: number, deltaPrice: number): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

removeDrawing

remove one drawing.

removeDrawing(id: string): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

clearDrawings

clear the document (undoable).

clearDrawings(): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

undoDrawings

An asynchronous method. Check the argument and return types below.

undoDrawings(): Promise<{ count: number; canUndo: boolean; canRedo: boolean }>

Return type: Promise<{ count: number; canUndo: boolean; canRedo: boolean }>. Call the method after element registration and await its Promise result.

redoDrawings

An asynchronous method. Check the argument and return types below.

redoDrawings(): Promise<{ count: number; canUndo: boolean; canRedo: boolean }>

Return type: Promise<{ count: number; canUndo: boolean; canRedo: boolean }>. Call the method after element registration and await its Promise result.

getDrawings

The current document (deep-copied, serialisable).

getDrawings(): Promise<StockDrawing[]>

Return type: Promise<StockDrawing[]>. Call the method after element registration and await its Promise result.

• StockDrawing

  Type definition

exportDrawings

Versioned JSON export of the document.

exportDrawings(): Promise<string>

Return type: Promise<string>. Call the method after element registration and await its Promise result.

loadDrawings

Restore a serialized document (undoable — it goes through the history).

loadDrawings(json: string): Promise<number>

Return type: Promise<number>. Call the method after element registration and await its Promise result.

getDrawingPoints

Projected css-px points for one drawing on the CURRENT render tape.

getDrawingPoints(id: string): Promise<Array<{ x: number; y: number }> | null>

Return type: Promise<Array<{ x: number; y: number }> | null>. Call the method after element registration and await its Promise result.

setActiveTool

Activate a placement tool (null = the select cursor).

setActiveTool(tool: string | null): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

getActiveTool

An asynchronous method. Check the argument and return types below.

getActiveTool(): Promise<string | null>

Return type: Promise<string | null>. Call the method after element registration and await its Promise result.

zoomBy

Zoom programmatically around an anchor fraction (default centre).

zoomBy(scale: number, anchorFraction?: number): Promise<{ from: number; to: number }>

Return type: Promise<{ from: number; to: number }>. Call the method after element registration and await its Promise result.

panByBars

Pan programmatically by (ungrouped) bars.

panByBars(bars: number): Promise<{ from: number; to: number }>

Return type: Promise<{ from: number; to: number }>. Call the method after element registration and await its Promise result.

setData

Replace the bar set.

setData(data: StockDataInput): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

appendTick

Live tick streaming (): roll a feed update into the tape — inside the last bar's interval it UPDATES the live candle (close replaces, extremes widen, volume accumulates); past it a new bar opens. A tail-pinned window auto-follows the new bar; stale out-of-order ticks drop (returns null).

appendTick(tick: StockTickInput): Promise<{ appended: boolean; time: number } | null>

Return type: Promise<{ appended: boolean; time: number } | null>. Call the method after element registration and await its Promise result.

• StockTickInput

  Type definition

appendTicks

Batch ticks in ONE repaint (returns the last applied result).

appendTicks(ticks: ReadonlyArray<StockTickInput>): Promise<{ appended: boolean; time: number } | null>

Return type: Promise<{ appended: boolean; time: number } | null>. Call the method after element registration and await its Promise result.

• StockTickInput

  Type definition

exportTemplate

Export the chart CONFIGURATION as a versioned JSON template () — style/params, scale, panes, indicators, drawings, compares, flags, window/resolution/grouping. The data tape stays out (templates travel between symbols).

exportTemplate(): Promise<string>

Return type: Promise<string>. Call the method after element registration and await its Promise result.

importTemplate

Apply a template (per-field whitelist; drawings land undoably).

importTemplate(json: string): Promise<{ ok: boolean; applied: string[] }>

Return type: Promise<{ ok: boolean; applied: string[] }>. Call the method after element registration and await its Promise result.

getSnapshotSVG

The composed standalone SVG snapshot (canvas raster + SVG chrome + the brand).

getSnapshotSVG(): Promise<string | null>

Return type: Promise<string | null>. Call the method after element registration and await its Promise result.

getCSV

The tape as a CSV table (ISO time, OHLC, volume).

getCSV(): Promise<string>

Return type: Promise<string>. Call the method after element registration and await its Promise result.

exportPNG

Download the composed snapshot as a PNG at export-scale. The grant is confirmed again after the rasterisation await: one lost (or changed) meanwhile rejects with the §4.1 stale refusal — no download, no exported.

exportPNG(): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

exportSVG

Download the composed snapshot as an SVG file (composed and saved in one turn, under a confirmed grant).

exportSVG(): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

exportCSV

Download the tape as a CSV file (under a confirmed grant; getCSV stays the ungated read).

exportCSV(): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

print

Print view with the inlined snapshot (the facade print mirror), opened under a confirmed grant.

print(): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

getBarCounts

Normalised bar count + visible range (diagnostics/tooling).

getBarCounts(): Promise<{ bars: number; from: number; to: number }>

Return type: Promise<{ bars: number; from: number; to: number }>. Call the method after element registration and await its Promise result.

getPaneLayout

Current pane rects (layout-local px).

getPaneLayout(): Promise<{ panes: Array<{ id: string; top: number; height: number }> }>

Return type: Promise<{ panes: Array<{ id: string; top: number; height: number }> }>. Call the method after element registration and await its Promise result.

addPane

Append a pane (default at the bottom).

addPane(pane: PaneSpecInput, at?: number): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

• PaneSpecInput

  Type definition

removePane

Remove a pane by id (the last pane stays).

removePane(id: string): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

reorderPane

Move a pane to a new stack position.

reorderPane(id: string, to: number): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

setPaneWeight

Set a pane's weight directly.

setPaneWeight(id: string, weight: number): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

loadOlderHistory

Pull older bars through historyLoader and keep the view anchored. chart.stock: when the grant ends (or changes) while the loader runs, nothing merges into the frozen tape and the call rejects with the §4.1 stale refusal. The licenseFeatureRefused event (code stale, method loadOlderHistory) is dispatched FIRST; the request then still ends with historyLoaded { added: 0, exhausted: false } so a loading state the app shows for historyRequested clears.

loadOlderHistory(count?: number): Promise<number>

Return type: Promise<number>. Call the method after element registration and await its Promise result.

applyRange

Apply a range button: window the CURRENT tape by calendar maths.

applyRange(range: StockRangeKey): Promise<{ from: number; to: number }>

Return type: Promise<{ from: number; to: number }>. Call the method after element registration and await its Promise result.

• StockRangeKey

  Type definition

setResolution

Switch the tape resolution (resets the window — indices change).

setResolution(resolution: StockResolution): Promise<void>

Return type: Promise<void>. Call the method after element registration and await its Promise result.

• StockResolution

  Type definition