# Stock Chart

Combine price history with financial exploration controls.

Canonical: https://chart.syidax.com/docs/components/stock-chart/

<a id="overview"></a>

## sy-stock-chart

Build financial interfaces with range selection, Navigator, and flags.

Align date time zones and trading sessions. The example uses fictional data to demonstrate display features.

Base chart tier: Pro. Features such as additional renderers and custom branding have separate entitlement requirements.

| Input | Data description |
| --- | --- |
| `data` | Chronological OHLCV records. |
| `session` | 24x7 or a trading session. |
| `flags` | Events with time, text, and title. |
| `seriesStyle` | How prices are drawn. |

- [Run in Components](https://chart.syidax.com/charts/stock-chart) — Change options and view framework-specific code
- [Shared installation and integration](https://chart.syidax.com/docs/getting-started.md)

<a id="example"></a>

## Complete implementation example

```html
<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-stock-chart.js';
  define0();

  // Pro: complete registerLicense at app startup using your issued certificate.
  // The website preview certificate is not for use in customer apps.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-stock-chart",
      "props": {
        "data": [
          {
            "time": 1767225600000,
            "open": 100,
            "close": 95,
            "high": 103,
            "low": 92,
            "volume": 1200
          },
          {
            "time": 1767312000000,
            "open": 104,
            "close": 106,
            "high": 109,
            "low": 101,
            "volume": 1337
          },
          {
            "time": 1767398400000,
            "open": 107,
            "close": 105,
            "high": 110,
            "low": 102,
            "volume": 1474
          },
          {
            "time": 1767484800000,
            "open": 109,
            "close": 114,
            "high": 117,
            "low": 106,
            "volume": 1611
          },
          {
            "time": 1767571200000,
            "open": 108,
            "close": 109,
            "high": 112,
            "low": 105,
            "volume": 1748
          },
          {
            "time": 1767657600000,
            "open": 106,
            "close": 103,
            "high": 109,
            "low": 100,
            "volume": 1885
          },
          {
            "time": 1767744000000,
            "open": 102,
            "close": 106,
            "high": 109,
            "low": 99,
            "volume": 2022
          },
          {
            "time": 1767830400000,
            "open": 100,
            "close": 100,
            "high": 103,
            "low": 97,
            "volume": 2159
          },
          {
            "time": 1767916800000,
            "open": 98,
            "close": 94,
            "high": 101,
            "low": 91,
            "volume": 2296
          },
          {
            "time": 1768003200000,
            "open": 99,
            "close": 102,
            "high": 105,
            "low": 96,
            "volume": 2433
          },
          {
            "time": 1768089600000,
            "open": 101,
            "close": 100,
            "high": 104,
            "low": 97,
            "volume": 2570
          },
          {
            "time": 1768176000000,
            "open": 105,
            "close": 100,
            "high": 108,
            "low": 97,
            "volume": 2707
          },
          {
            "time": 1768262400000,
            "open": 109,
            "close": 111,
            "high": 114,
            "low": 106,
            "volume": 2844
          },
          {
            "time": 1768348800000,
            "open": 113,
            "close": 111,
            "high": 116,
            "low": 108,
            "volume": 2981
          },
          {
            "time": 1768435200000,
            "open": 115,
            "close": 120,
            "high": 123,
            "low": 112,
            "volume": 1318
          },
          {
            "time": 1768521600000,
            "open": 115,
            "close": 116,
            "high": 119,
            "low": 112,
            "volume": 1455
          },
          {
            "time": 1768608000000,
            "open": 114,
            "close": 111,
            "high": 117,
            "low": 108,
            "volume": 1592
          },
          {
            "time": 1768694400000,
            "open": 111,
            "close": 115,
            "high": 118,
            "low": 108,
            "volume": 1729
          },
          {
            "time": 1768780800000,
            "open": 108,
            "close": 108,
            "high": 111,
            "low": 105,
            "volume": 1866
          },
          {
            "time": 1768867200000,
            "open": 105,
            "close": 101,
            "high": 108,
            "low": 98,
            "volume": 2003
          },
          {
            "time": 1768953600000,
            "open": 105,
            "close": 108,
            "high": 111,
            "low": 102,
            "volume": 2140
          },
          {
            "time": 1769040000000,
            "open": 107,
            "close": 106,
            "high": 110,
            "low": 103,
            "volume": 2277
          },
          {
            "time": 1769126400000,
            "open": 110,
            "close": 105,
            "high": 113,
            "low": 102,
            "volume": 2414
          },
          {
            "time": 1769212800000,
            "open": 114,
            "close": 116,
            "high": 119,
            "low": 111,
            "volume": 2551
          },
          {
            "time": 1769299200000,
            "open": 119,
            "close": 117,
            "high": 122,
            "low": 114,
            "volume": 2688
          },
          {
            "time": 1769385600000,
            "open": 121,
            "close": 126,
            "high": 129,
            "low": 118,
            "volume": 2825
          },
          {
            "time": 1769472000000,
            "open": 123,
            "close": 124,
            "high": 127,
            "low": 120,
            "volume": 2962
          },
          {
            "time": 1769558400000,
            "open": 121,
            "close": 118,
            "high": 124,
            "low": 115,
            "volume": 1299
          },
          {
            "time": 1769644800000,
            "open": 119,
            "close": 123,
            "high": 126,
            "low": 116,
            "volume": 1436
          },
          {
            "time": 1769731200000,
            "open": 116,
            "close": 116,
            "high": 119,
            "low": 113,
            "volume": 1573
          },
          {
            "time": 1769817600000,
            "open": 113,
            "close": 109,
            "high": 116,
            "low": 106,
            "volume": 1710
          },
          {
            "time": 1769904000000,
            "open": 112,
            "close": 115,
            "high": 118,
            "low": 109,
            "volume": 1847
          }
        ],
        "session": "24x7",
        "seriesStyle": "candlestick",
        "showNavigator": true,
        "showRangeSelector": true,
        "width": 640,
        "height": 440,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'stock-chart example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('flagClick', event.detail);
  };
  chart.addEventListener('flagClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // In an SPA, call this function when the view is disposed.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('flagClick', onEvent);
    container.replaceChildren();
  }
</script>
```

<a id="props"></a>

## Properties

<a id="property-width"></a>

### width

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

| Item | Value |
| --- | --- |
| JavaScript property | `width` |
| HTML attribute | `width` |
| Type | `number` |
| Default | `760` |

<a id="property-height"></a>

### height

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

| Item | Value |
| --- | --- |
| JavaScript property | `height` |
| HTML attribute | `height` |
| Type | `number` |
| Default | `420` |

<a id="property-brandLogo"></a>

### 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.

| Item | Value |
| --- | --- |
| JavaScript property | `brandLogo` |
| HTML attribute | `brand-logo` |
| Type | `string` |
| Default | `undefined` |

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

<a id="property-brandPosition"></a>

### 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.

| Item | Value |
| --- | --- |
| JavaScript property | `brandPosition` |
| HTML attribute | `brand-position` |
| Type | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` |
| Default | `'bottom-right'` |
| Allowed values | `top-left`, `top-right`, `bottom-left`, `bottom-right` |

<a id="property-data"></a>

### data

Chronological OHLCV records.

| Item | Value |
| --- | --- |
| JavaScript property | `data` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `StockDataInput` |
| Default | `undefined` |

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

<a id="property-session"></a>

### session

24x7 or a trading session.

| Item | Value |
| --- | --- |
| JavaScript property | `session` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `'24x7' \| 'us-equity' \| StockSessionInput` |
| Default | `'24x7'` |
| Literals in the type | `24x7`, `us-equity` |

- [StockSessionInput](https://chart.syidax.com/docs/types/StockSessionInput.md) — Type definition

<a id="property-visibleFrom"></a>

### visibleFrom

Visible bar range (indices; defaults to everything).

| Item | Value |
| --- | --- |
| JavaScript property | `visibleFrom` |
| HTML attribute | `visible-from` |
| Type | `number` |
| Default | `undefined` |

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

<a id="property-visibleTo"></a>

### visibleTo

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

| Item | Value |
| --- | --- |
| JavaScript property | `visibleTo` |
| HTML attribute | `visible-to` |
| Type | `number` |
| Default | `undefined` |

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

<a id="property-showNavigator"></a>

### showNavigator

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

| Item | Value |
| --- | --- |
| JavaScript property | `showNavigator` |
| HTML attribute | `show-navigator` |
| Type | `boolean` |
| Default | `false` |

<a id="property-showRangeSelector"></a>

### showRangeSelector

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

| Item | Value |
| --- | --- |
| JavaScript property | `showRangeSelector` |
| HTML attribute | `show-range-selector` |
| Type | `boolean` |
| Default | `false` |

<a id="property-resolution"></a>

### resolution

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

| Item | Value |
| --- | --- |
| JavaScript property | `resolution` |
| HTML attribute | `resolution` |
| Type | `StockResolution` |
| Default | `'1d'` |
| Allowed values | `1d`, `1w`, `1M` |

- [StockResolution](https://chart.syidax.com/docs/types/StockResolution.md) — Type definition

<a id="property-dataGrouping"></a>

### dataGrouping

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

| Item | Value |
| --- | --- |
| JavaScript property | `dataGrouping` |
| HTML attribute | `data-grouping` |
| Type | `string` |
| Default | `'auto'` |

<a id="property-historyLoader"></a>

### historyLoader

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

| Item | Value |
| --- | --- |
| JavaScript property | `historyLoader` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `(oldestTime: number, count: number) => Promise<ReadonlyArray<StockBarInput>> \| ReadonlyArray<StockBarInput>` |
| Default | `undefined` |

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

<a id="property-historyThreshold"></a>

### historyThreshold

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

| Item | Value |
| --- | --- |
| JavaScript property | `historyThreshold` |
| HTML attribute | `history-threshold` |
| Type | `number` |
| Default | `30` |

<a id="property-panes"></a>

### panes

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

| Item | Value |
| --- | --- |
| JavaScript property | `panes` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<PaneSpecInput>` |
| Default | `undefined` |

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

- [PaneSpecInput](https://chart.syidax.com/docs/types/PaneSpecInput.md) — Type definition

<a id="property-seriesStyle"></a>

### seriesStyle

How prices are drawn.

| Item | Value |
| --- | --- |
| JavaScript property | `seriesStyle` |
| HTML attribute | `series-style` |
| Type | `StockSeriesStyle \| DerivedStockStyle` |
| Default | `'candlestick'` |
| Allowed values | `area`, `ohlc`, `hlc`, `hilo`, `hollow`, `line`, `candlestick`, `column-range`, `baseline`, `hlc-area`, `volume-candle`, `heikin-ashi`, `renko`, `kagi`, `point-figure`, `line-break` |

- [StockSeriesStyle](https://chart.syidax.com/docs/types/StockSeriesStyle.md) — Type definition
- [DerivedStockStyle](https://chart.syidax.com/docs/types/DerivedStockStyle.md) — Type definition

<a id="property-brickSize"></a>

### brickSize

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

| Item | Value |
| --- | --- |
| JavaScript property | `brickSize` |
| HTML attribute | `brick-size` |
| Type | `number` |
| Default | `undefined` |

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

<a id="property-reversalPct"></a>

### reversalPct

Kagi reversal, percent (default 4).

| Item | Value |
| --- | --- |
| JavaScript property | `reversalPct` |
| HTML attribute | `reversal-pct` |
| Type | `number` |
| Default | `4` |

<a id="property-boxSize"></a>

### boxSize

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

| Item | Value |
| --- | --- |
| JavaScript property | `boxSize` |
| HTML attribute | `box-size` |
| Type | `number` |
| Default | `undefined` |

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

<a id="property-reversalBoxes"></a>

### reversalBoxes

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

| Item | Value |
| --- | --- |
| JavaScript property | `reversalBoxes` |
| HTML attribute | `reversal-boxes` |
| Type | `number` |
| Default | `3` |

<a id="property-lineBreakCount"></a>

### lineBreakCount

Line Break lookback (default 3-line break).

| Item | Value |
| --- | --- |
| JavaScript property | `lineBreakCount` |
| HTML attribute | `line-break-count` |
| Type | `number` |
| Default | `3` |

<a id="property-upColor"></a>

### upColor

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

| Item | Value |
| --- | --- |
| JavaScript property | `upColor` |
| HTML attribute | `up-color` |
| Type | `string` |
| Default | `'#16a34a'` |

<a id="property-downColor"></a>

### downColor

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

| Item | Value |
| --- | --- |
| JavaScript property | `downColor` |
| HTML attribute | `down-color` |
| Type | `string` |
| Default | `'#dc2626'` |

<a id="property-baselineValue"></a>

### baselineValue

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

| Item | Value |
| --- | --- |
| JavaScript property | `baselineValue` |
| HTML attribute | `baseline-value` |
| Type | `number` |
| Default | `undefined` |

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

<a id="property-lineColor"></a>

### lineColor

Line/area/hilo ink.

| Item | Value |
| --- | --- |
| JavaScript property | `lineColor` |
| HTML attribute | `line-color` |
| Type | `string` |
| Default | `'#2563eb'` |

<a id="property-priceScaleMode"></a>

### priceScaleMode

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

| Item | Value |
| --- | --- |
| JavaScript property | `priceScaleMode` |
| HTML attribute | `price-scale` |
| Type | `string` |
| Default | `'linear'` |

<a id="property-referenceLines"></a>

### referenceLines

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

| Item | Value |
| --- | --- |
| JavaScript property | `referenceLines` |
| HTML attribute | `reference-lines` |
| Type | `string` |
| Default | `undefined` |

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

<a id="property-bid"></a>

### bid

Quotes for the `bid`/`ask` reference lines.

| Item | Value |
| --- | --- |
| JavaScript property | `bid` |
| HTML attribute | `bid` |
| Type | `number` |
| Default | `undefined` |

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

<a id="property-ask"></a>

### ask

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

| Item | Value |
| --- | --- |
| JavaScript property | `ask` |
| HTML attribute | `ask` |
| Type | `number` |
| Default | `undefined` |

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

<a id="property-crosshair"></a>

### crosshair

Crosshair + OHLC legend on hover ().

| Item | Value |
| --- | --- |
| JavaScript property | `crosshair` |
| HTML attribute | `crosshair` |
| Type | `boolean` |
| Default | `true` |

<a id="property-showLegend"></a>

### showLegend

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

| Item | Value |
| --- | --- |
| JavaScript property | `showLegend` |
| HTML attribute | `show-legend` |
| Type | `boolean` |
| Default | `true` |

<a id="property-compareSymbols"></a>

### compareSymbols

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

| Item | Value |
| --- | --- |
| JavaScript property | `compareSymbols` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<CompareSymbolInput>` |
| Default | `undefined` |

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

- [CompareSymbolInput](https://chart.syidax.com/docs/types/CompareSymbolInput.md) — Type definition

<a id="property-flags"></a>

### flags

Events with time, text, and title.

| Item | Value |
| --- | --- |
| JavaScript property | `flags` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<StockFlagInput>` |
| Default | `undefined` |

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

- [StockFlagInput](https://chart.syidax.com/docs/types/StockFlagInput.md) — Type definition

<a id="property-indicators"></a>

### 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.

| Item | Value |
| --- | --- |
| JavaScript property | `indicators` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<StockIndicatorInput>` |
| Default | `undefined` |

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

- [StockIndicatorInput](https://chart.syidax.com/docs/types/StockIndicatorInput.md) — Type definition

<a id="property-drawings"></a>

### 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.

| Item | Value |
| --- | --- |
| JavaScript property | `drawings` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<StockDrawingInput>` |
| Default | `undefined` |

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

- [StockDrawingInput](https://chart.syidax.com/docs/types/StockDrawingInput.md) — Type definition

<a id="property-showToolbar"></a>

### showToolbar

Show the left drawing-tools toolbar ().

| Item | Value |
| --- | --- |
| JavaScript property | `showToolbar` |
| HTML attribute | `show-toolbar` |
| Type | `boolean` |
| Default | `false` |

<a id="property-exportScale"></a>

### exportScale

PNG export pixel scale ().

| Item | Value |
| --- | --- |
| JavaScript property | `exportScale` |
| HTML attribute | `export-scale` |
| Type | `number` |
| Default | `2` |

<a id="property-locale"></a>

### locale

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

| Item | Value |
| --- | --- |
| JavaScript property | `locale` |
| HTML attribute | `locale` |
| Type | `string` |
| Default | `'en-US'` |

<a id="property-trades"></a>

### trades

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

| Item | Value |
| --- | --- |
| JavaScript property | `trades` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<StockTradeInput>` |
| Default | `undefined` |

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

- [StockTradeInput](https://chart.syidax.com/docs/types/StockTradeInput.md) — Type definition

<a id="property-positions"></a>

### positions

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

| Item | Value |
| --- | --- |
| JavaScript property | `positions` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ReadonlyArray<StockPositionInput>` |
| Default | `undefined` |

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

- [StockPositionInput](https://chart.syidax.com/docs/types/StockPositionInput.md) — Type definition

<a id="property-chartTitle"></a>

### chartTitle

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

| Item | Value |
| --- | --- |
| JavaScript property | `chartTitle` |
| HTML attribute | `chart-title` |
| Type | `string` |
| Default | `undefined` |

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

<a id="property-chartSubtitle"></a>

### chartSubtitle

The subtitle inside the chart.

| Item | Value |
| --- | --- |
| JavaScript property | `chartSubtitle` |
| HTML attribute | `chart-subtitle` |
| Type | `string` |
| Default | `undefined` |

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

<a id="events"></a>

## Events

<a id="event-rendered"></a>

### 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 }>`.

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

<a id="event-paneLayoutChanged"></a>

### 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 }> }>`.

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

<a id="event-visibleRangeChanged"></a>

### 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 }>`.

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

<a id="event-rangeSelected"></a>

### 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 }>`.

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

- [StockRangeKey](https://chart.syidax.com/docs/types/StockRangeKey.md) — Type definition

<a id="event-resolutionChanged"></a>

### resolutionChanged

The resolution changed.

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

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

- [StockResolution](https://chart.syidax.com/docs/types/StockResolution.md) — Type definition

<a id="event-historyRequested"></a>

### historyRequested

A history load started / finished.

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

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

<a id="event-historyLoaded"></a>

### 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 }>`.

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

<a id="event-crosshairMoved"></a>

### 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>`.

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

<a id="event-compareChanged"></a>

### compareChanged

The compare set changed.

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

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

<a id="event-flagClick"></a>

### 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 }>`.

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

<a id="event-flagHover"></a>

### 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>`.

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

<a id="event-indicatorsChanged"></a>

### indicatorsChanged

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

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

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

<a id="event-drawingsChanged"></a>

### 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 }>`.

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

<a id="event-drawingSelect"></a>

### 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>`.

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

<a id="event-toolChanged"></a>

### 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 }>`.

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

<a id="event-tickApplied"></a>

### 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 }>`.

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

<a id="event-tradeClick"></a>

### 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 }>`.

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

<a id="event-templateApplied"></a>

### 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[] }>`.

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

<a id="event-exported"></a>

### 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 }>`.

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

<a id="methods"></a>

## Methods

<a id="method-addCompare"></a>

### addCompare

Add a compare overlay (duplicate ids replace).

```typescript
addCompare(symbol: CompareSymbolInput): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `symbol` | `CompareSymbolInput` | Required |

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

- [CompareSymbolInput](https://chart.syidax.com/docs/types/CompareSymbolInput.md) — Type definition

<a id="method-removeCompare"></a>

### removeCompare

Remove a compare overlay by id.

```typescript
removeCompare(id: string): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |

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

<a id="method-addIndicator"></a>

### 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.

```typescript
addIndicator(spec: StockIndicatorInput): Promise<StockIndicatorInput>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `spec` | `StockIndicatorInput` | Required |

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

- [StockIndicatorInput](https://chart.syidax.com/docs/types/StockIndicatorInput.md) — Type definition

<a id="method-removeIndicator"></a>

### removeIndicator

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

```typescript
removeIndicator(id: string): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |

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

<a id="method-updateIndicator"></a>

### updateIndicator

Merge params into an instance (by resolved id).

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

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |
| `params` | `Record<string, number \| string>` | Required |

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

<a id="method-getIndicators"></a>

### getIndicators

Resolved indicator list (serialisable — no definition objects).

```typescript
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.

<a id="method-defineIndicator"></a>

### 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).

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

| Arguments | Type | Required |
| --- | --- | --- |
| `definition` | `IndicatorDefinition` | Required |

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

- [IndicatorDefinition](https://chart.syidax.com/docs/types/IndicatorDefinition.md) — Type definition

<a id="method-undefineIndicator"></a>

### undefineIndicator

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `kind` | `string` | Required |

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

<a id="method-getIndicatorKinds"></a>

### getIndicatorKinds

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

```typescript
getIndicatorKinds(): Promise<string[]>
```

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

<a id="method-getIndicatorValues"></a>

### getIndicatorValues

Computed columns for one instance over the current render tape.

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

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |

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

<a id="method-addDrawing"></a>

### addDrawing

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `input` | `StockDrawingInput` | Required |

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

- [StockDrawing](https://chart.syidax.com/docs/types/StockDrawing.md) — Type definition
- [StockDrawingInput](https://chart.syidax.com/docs/types/StockDrawingInput.md) — Type definition

<a id="method-updateDrawing"></a>

### updateDrawing

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |
| `patch` | `Partial<Omit<StockDrawing, 'id'>>` | Required |

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

- [StockDrawing](https://chart.syidax.com/docs/types/StockDrawing.md) — Type definition

<a id="method-moveDrawing"></a>

### moveDrawing

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |
| `deltaTime` | `number` | Required |
| `deltaPrice` | `number` | Required |

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

<a id="method-removeDrawing"></a>

### removeDrawing

remove one drawing.

```typescript
removeDrawing(id: string): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |

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

<a id="method-clearDrawings"></a>

### clearDrawings

clear the document (undoable).

```typescript
clearDrawings(): Promise<void>
```

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

<a id="method-undoDrawings"></a>

### undoDrawings

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

```typescript
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.

<a id="method-redoDrawings"></a>

### redoDrawings

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

```typescript
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.

<a id="method-getDrawings"></a>

### getDrawings

The current document (deep-copied, serialisable).

```typescript
getDrawings(): Promise<StockDrawing[]>
```

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

- [StockDrawing](https://chart.syidax.com/docs/types/StockDrawing.md) — Type definition

<a id="method-exportDrawings"></a>

### exportDrawings

Versioned JSON export of the document.

```typescript
exportDrawings(): Promise<string>
```

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

<a id="method-loadDrawings"></a>

### loadDrawings

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

```typescript
loadDrawings(json: string): Promise<number>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `json` | `string` | Required |

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

<a id="method-getDrawingPoints"></a>

### getDrawingPoints

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |

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

<a id="method-setActiveTool"></a>

### setActiveTool

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `tool` | `string \| null` | Required |

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

<a id="method-getActiveTool"></a>

### getActiveTool

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

```typescript
getActiveTool(): Promise<string | null>
```

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

<a id="method-zoomBy"></a>

### zoomBy

Zoom programmatically around an anchor fraction (default centre).

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

| Arguments | Type | Required |
| --- | --- | --- |
| `scale` | `number` | Required |
| `anchorFraction` | `number` | Optional |

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

<a id="method-panByBars"></a>

### panByBars

Pan programmatically by (ungrouped) bars.

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

| Arguments | Type | Required |
| --- | --- | --- |
| `bars` | `number` | Required |

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

<a id="method-setData"></a>

### setData

Replace the bar set.

```typescript
setData(data: StockDataInput): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `data` | `StockDataInput` | Required |

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

<a id="method-appendTick"></a>

### 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).

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

| Arguments | Type | Required |
| --- | --- | --- |
| `tick` | `StockTickInput` | Required |

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

- [StockTickInput](https://chart.syidax.com/docs/types/StockTickInput.md) — Type definition

<a id="method-appendTicks"></a>

### appendTicks

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `ticks` | `ReadonlyArray<StockTickInput>` | Required |

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

- [StockTickInput](https://chart.syidax.com/docs/types/StockTickInput.md) — Type definition

<a id="method-exportTemplate"></a>

### 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).

```typescript
exportTemplate(): Promise<string>
```

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

<a id="method-importTemplate"></a>

### importTemplate

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `json` | `string` | Required |

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

<a id="method-getSnapshotSVG"></a>

### getSnapshotSVG

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

```typescript
getSnapshotSVG(): Promise<string | null>
```

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

<a id="method-getCSV"></a>

### getCSV

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

```typescript
getCSV(): Promise<string>
```

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

<a id="method-exportPNG"></a>

### 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`.

```typescript
exportPNG(): Promise<void>
```

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

<a id="method-exportSVG"></a>

### exportSVG

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

```typescript
exportSVG(): Promise<void>
```

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

<a id="method-exportCSV"></a>

### exportCSV

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

```typescript
exportCSV(): Promise<void>
```

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

<a id="method-print"></a>

### print

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

```typescript
print(): Promise<void>
```

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

<a id="method-getBarCounts"></a>

### getBarCounts

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

```typescript
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.

<a id="method-getPaneLayout"></a>

### getPaneLayout

Current pane rects (layout-local px).

```typescript
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.

<a id="method-addPane"></a>

### addPane

Append a pane (default at the bottom).

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

| Arguments | Type | Required |
| --- | --- | --- |
| `pane` | `PaneSpecInput` | Required |
| `at` | `number` | Optional |

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

- [PaneSpecInput](https://chart.syidax.com/docs/types/PaneSpecInput.md) — Type definition

<a id="method-removePane"></a>

### removePane

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

```typescript
removePane(id: string): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |

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

<a id="method-reorderPane"></a>

### reorderPane

Move a pane to a new stack position.

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

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |
| `to` | `number` | Required |

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

<a id="method-setPaneWeight"></a>

### setPaneWeight

Set a pane's weight directly.

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

| Arguments | Type | Required |
| --- | --- | --- |
| `id` | `string` | Required |
| `weight` | `number` | Required |

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

<a id="method-loadOlderHistory"></a>

### 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.

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

| Arguments | Type | Required |
| --- | --- | --- |
| `count` | `number` | Optional |

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

<a id="method-applyRange"></a>

### applyRange

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

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

| Arguments | Type | Required |
| --- | --- | --- |
| `range` | `StockRangeKey` | Required |

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

- [StockRangeKey](https://chart.syidax.com/docs/types/StockRangeKey.md) — Type definition

<a id="method-setResolution"></a>

### setResolution

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

```typescript
setResolution(resolution: StockResolution): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `resolution` | `StockResolution` | Required |

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

- [StockResolution](https://chart.syidax.com/docs/types/StockResolution.md) — Type definition