# Stock Chart

가격 이력과 금융 탐색 기능을 함께 제공합니다.

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

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

## sy-stock-chart

기간 선택·Navigator·플래그를 갖춘 금융 화면을 구성하세요.

날짜의 시간대와 거래 세션을 맞추세요. 예제는 가상 데이터이며 표시 기능의 사용법입니다.

기본 차트 등급: Pro. 추가 렌더러·커스텀 브랜딩 등 기능의 권한은 별도입니다.

| 입력 | 데이터 설명 |
| --- | --- |
| `data` | 시간순 OHLCV 데이터입니다. |
| `session` | 24x7 또는 거래 세션을 지정합니다. |
| `flags` | time·text·title을 가진 이벤트 목록입니다. |
| `seriesStyle` | 가격을 그리는 표현입니다. |

- [Components에서 실행하기](https://chart.syidax.com/charts/stock-chart) — 옵션 변경과 프레임워크별 코드
- [공통 설치와 연결](https://chart.syidax.com/ko/docs/getting-started.md)

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

## 전체 적용 예제

```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: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  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 예제 차트');
    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);

  // SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('flagClick', onEvent);
    container.replaceChildren();
  }
</script>
```

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

## Properties

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

### width

차트의 너비를 px 단위로 지정합니다. 컨테이너 너비가 변하는 앱에서는 ResizeObserver에서 width를 갱신하세요.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `width` |
| HTML attribute | `width` |
| 타입 | `number` |
| 기본값 | `760` |

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

### height

차트의 높이를 px 단위로 지정합니다. 축, 제목과 범례가 차지하는 공간을 함께 고려하세요.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `height` |
| HTML attribute | `height` |
| 타입 | `number` |
| 기본값 | `420` |

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

### brandLogo

기본값은 Syidax 심볼과 워드마크입니다. Pro의 chart.branding 권한으로 none을 지정해 제거하거나 PNG·JPEG·WebP data URL로 교체할 수 있습니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `brandLogo` |
| HTML attribute | `brand-logo` |
| 타입 | `string` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### brandPosition

로고를 고정할 코너입니다. Community·Pro 모두 네 코너 중 하나를 선택할 수 있으며 화면과 이미지 내보내기에 같은 위치를 사용합니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `brandPosition` |
| HTML attribute | `brand-position` |
| 타입 | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` |
| 기본값 | `'bottom-right'` |
| 허용값 | `top-left`, `top-right`, `bottom-left`, `bottom-right` |

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

### data

시간순 OHLCV 데이터입니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `data` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `StockDataInput` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### session

24x7 또는 거래 세션을 지정합니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `session` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `'24x7' \| 'us-equity' \| StockSessionInput` |
| 기본값 | `'24x7'` |
| 타입에 포함된 리터럴 | `24x7`, `us-equity` |

- [StockSessionInput](https://chart.syidax.com/ko/docs/types/StockSessionInput.md) — 타입 정의

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

### visibleFrom

Visible bar range (indices; defaults to everything).

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `visibleFrom` |
| HTML attribute | `visible-from` |
| 타입 | `number` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### visibleTo

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `visibleTo` |
| HTML attribute | `visible-to` |
| 타입 | `number` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### showNavigator

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showNavigator` |
| HTML attribute | `show-navigator` |
| 타입 | `boolean` |
| 기본값 | `false` |

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

### showRangeSelector

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showRangeSelector` |
| HTML attribute | `show-range-selector` |
| 타입 | `boolean` |
| 기본값 | `false` |

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

### resolution

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `resolution` |
| HTML attribute | `resolution` |
| 타입 | `StockResolution` |
| 기본값 | `'1d'` |
| 허용값 | `1d`, `1w`, `1M` |

- [StockResolution](https://chart.syidax.com/ko/docs/types/StockResolution.md) — 타입 정의

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

### dataGrouping

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `dataGrouping` |
| HTML attribute | `data-grouping` |
| 타입 | `string` |
| 기본값 | `'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.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `historyLoader` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `(oldestTime: number, count: number) => Promise<ReadonlyArray<StockBarInput>> \| ReadonlyArray<StockBarInput>` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### historyThreshold

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `historyThreshold` |
| HTML attribute | `history-threshold` |
| 타입 | `number` |
| 기본값 | `30` |

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

### panes

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `panes` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray<PaneSpecInput>` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [PaneSpecInput](https://chart.syidax.com/ko/docs/types/PaneSpecInput.md) — 타입 정의

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

### seriesStyle

가격을 그리는 표현입니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `seriesStyle` |
| HTML attribute | `series-style` |
| 타입 | `StockSeriesStyle \| DerivedStockStyle` |
| 기본값 | `'candlestick'` |
| 허용값 | `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/ko/docs/types/StockSeriesStyle.md) — 타입 정의
- [DerivedStockStyle](https://chart.syidax.com/ko/docs/types/DerivedStockStyle.md) — 타입 정의

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

### brickSize

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `brickSize` |
| HTML attribute | `brick-size` |
| 타입 | `number` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### reversalPct

Kagi reversal, percent (default 4).

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `reversalPct` |
| HTML attribute | `reversal-pct` |
| 타입 | `number` |
| 기본값 | `4` |

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

### boxSize

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `boxSize` |
| HTML attribute | `box-size` |
| 타입 | `number` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### reversalBoxes

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `reversalBoxes` |
| HTML attribute | `reversal-boxes` |
| 타입 | `number` |
| 기본값 | `3` |

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

### lineBreakCount

Line Break lookback (default 3-line break).

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `lineBreakCount` |
| HTML attribute | `line-break-count` |
| 타입 | `number` |
| 기본값 | `3` |

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

### upColor

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `upColor` |
| HTML attribute | `up-color` |
| 타입 | `string` |
| 기본값 | `'#16a34a'` |

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

### downColor

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `downColor` |
| HTML attribute | `down-color` |
| 타입 | `string` |
| 기본값 | `'#dc2626'` |

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

### baselineValue

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `baselineValue` |
| HTML attribute | `baseline-value` |
| 타입 | `number` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### lineColor

Line/area/hilo ink.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `lineColor` |
| HTML attribute | `line-color` |
| 타입 | `string` |
| 기본값 | `'#2563eb'` |

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

### priceScaleMode

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `priceScaleMode` |
| HTML attribute | `price-scale` |
| 타입 | `string` |
| 기본값 | `'linear'` |

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

### referenceLines

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `referenceLines` |
| HTML attribute | `reference-lines` |
| 타입 | `string` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### bid

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `bid` |
| HTML attribute | `bid` |
| 타입 | `number` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### ask

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `ask` |
| HTML attribute | `ask` |
| 타입 | `number` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### crosshair

Crosshair + OHLC legend on hover ().

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `crosshair` |
| HTML attribute | `crosshair` |
| 타입 | `boolean` |
| 기본값 | `true` |

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

### showLegend

HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showLegend` |
| HTML attribute | `show-legend` |
| 타입 | `boolean` |
| 기본값 | `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.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `compareSymbols` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray<CompareSymbolInput>` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [CompareSymbolInput](https://chart.syidax.com/ko/docs/types/CompareSymbolInput.md) — 타입 정의

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

### flags

time·text·title을 가진 이벤트 목록입니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `flags` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray<StockFlagInput>` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [StockFlagInput](https://chart.syidax.com/ko/docs/types/StockFlagInput.md) — 타입 정의

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `indicators` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray<StockIndicatorInput>` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [StockIndicatorInput](https://chart.syidax.com/ko/docs/types/StockIndicatorInput.md) — 타입 정의

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `drawings` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray<StockDrawingInput>` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [StockDrawingInput](https://chart.syidax.com/ko/docs/types/StockDrawingInput.md) — 타입 정의

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

### showToolbar

Show the left drawing-tools toolbar ().

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showToolbar` |
| HTML attribute | `show-toolbar` |
| 타입 | `boolean` |
| 기본값 | `false` |

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

### exportScale

PNG export pixel scale ().

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `exportScale` |
| HTML attribute | `export-scale` |
| 타입 | `number` |
| 기본값 | `2` |

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

### locale

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `locale` |
| HTML attribute | `locale` |
| 타입 | `string` |
| 기본값 | `'en-US'` |

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

### trades

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `trades` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray<StockTradeInput>` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [StockTradeInput](https://chart.syidax.com/ko/docs/types/StockTradeInput.md) — 타입 정의

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

### positions

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `positions` |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | `ReadonlyArray<StockPositionInput>` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [StockPositionInput](https://chart.syidax.com/ko/docs/types/StockPositionInput.md) — 타입 정의

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

### chartTitle

차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `chartTitle` |
| HTML attribute | `chart-title` |
| 타입 | `string` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

### chartSubtitle

차트 내부 부제목입니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `chartSubtitle` |
| HTML attribute | `chart-subtitle` |
| 타입 | `string` |
| 기본값 | `undefined` |

undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

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

## Events

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

### rendered

차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.

이벤트 이름: `rendered`. 대소문자를 구분합니다. payload는 `CustomEvent<{ bars: number; visibleBars: number; renderMs: number }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `paneLayoutChanged`. 대소문자를 구분합니다. payload는 `CustomEvent<{ panes: Array<{ id: string; weight: number }> }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `visibleRangeChanged`. 대소문자를 구분합니다. payload는 `CustomEvent<{ from: number; to: number }>`의 `detail`에서 읽습니다.

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

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

### rangeSelected

A range button was applied.

이벤트 이름: `rangeSelected`. 대소문자를 구분합니다. payload는 `CustomEvent<{ range: StockRangeKey; from: number; to: number }>`의 `detail`에서 읽습니다.

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

- [StockRangeKey](https://chart.syidax.com/ko/docs/types/StockRangeKey.md) — 타입 정의

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

### resolutionChanged

The resolution changed.

이벤트 이름: `resolutionChanged`. 대소문자를 구분합니다. payload는 `CustomEvent<{ resolution: StockResolution }>`의 `detail`에서 읽습니다.

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

- [StockResolution](https://chart.syidax.com/ko/docs/types/StockResolution.md) — 타입 정의

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

### historyRequested

A history load started / finished.

이벤트 이름: `historyRequested`. 대소문자를 구분합니다. payload는 `CustomEvent<{ oldestTime: number; count: number }>`의 `detail`에서 읽습니다.

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

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

### historyLoaded

CustomEvent.detail 타입: { added: number; exhausted: boolean }. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: `historyLoaded`. 대소문자를 구분합니다. payload는 `CustomEvent<{ added: number; exhausted: boolean }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `crosshairMoved`. 대소문자를 구분합니다. payload는 `CustomEvent<{ index: number; time: number; price: number } | null>`의 `detail`에서 읽습니다.

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

이벤트 이름: `compareChanged`. 대소문자를 구분합니다. payload는 `CustomEvent<{ ids: string[] }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `flagClick`. 대소문자를 구분합니다. payload는 `CustomEvent<{ id: string; time: number; text: string; title?: string }>`의 `detail`에서 읽습니다.

```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 타입: { id: string; time: number; text: string; title?: string } | null. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: `flagHover`. 대소문자를 구분합니다. payload는 `CustomEvent<{ id: string; time: number; text: string; title?: string } | null>`의 `detail`에서 읽습니다.

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

이벤트 이름: `indicatorsChanged`. 대소문자를 구분합니다. payload는 `CustomEvent<{ ids: string[] }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `drawingsChanged`. 대소문자를 구분합니다. payload는 `CustomEvent<{ count: number; canUndo: boolean; canRedo: boolean }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `drawingSelect`. 대소문자를 구분합니다. payload는 `CustomEvent<{ id: string } | null>`의 `detail`에서 읽습니다.

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

이벤트 이름: `toolChanged`. 대소문자를 구분합니다. payload는 `CustomEvent<{ tool: string | null }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `tickApplied`. 대소문자를 구분합니다. payload는 `CustomEvent<{ appended: boolean; time: number; close: number; bars: number }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `tradeClick`. 대소문자를 구분합니다. payload는 `CustomEvent<{ id: string; time: number; side: 'buy' | 'sell'; price: number; quantity?: number }>`의 `detail`에서 읽습니다.

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

이벤트 이름: `templateApplied`. 대소문자를 구분합니다. payload는 `CustomEvent<{ applied: string[] }>`의 `detail`에서 읽습니다.

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

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

### exported

An export finished (`png` | `svg` | `csv`).

이벤트 이름: `exported`. 대소문자를 구분합니다. payload는 `CustomEvent<{ format: string; filename: string }>`의 `detail`에서 읽습니다.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `symbol` | `CompareSymbolInput` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [CompareSymbolInput](https://chart.syidax.com/ko/docs/types/CompareSymbolInput.md) — 타입 정의

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

### removeCompare

Remove a compare overlay by id.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `spec` | `StockIndicatorInput` | 필수 |

반환 타입: `Promise<StockIndicatorInput>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [StockIndicatorInput](https://chart.syidax.com/ko/docs/types/StockIndicatorInput.md) — 타입 정의

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

### removeIndicator

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

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |
| `params` | `Record<string, number \| string>` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

<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;
  }>>
```

반환 타입: `Promise<Array<{
    id: string; kind: string; params: Record<string, number>; linkedTo: string; paneId: string | null; label: string;
  }>>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `definition` | `IndicatorDefinition` | 필수 |

반환 타입: `Promise<{ ok: boolean; errors: string[] }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [IndicatorDefinition](https://chart.syidax.com/ko/docs/types/IndicatorDefinition.md) — 타입 정의

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

### undefineIndicator

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

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `kind` | `string` | 필수 |

반환 타입: `Promise<{ removed: boolean }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### getIndicatorKinds

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

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

반환 타입: `Promise<string[]>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |

반환 타입: `Promise<Record<string, Array<number | null>> | null>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `input` | `StockDrawingInput` | 필수 |

반환 타입: `Promise<StockDrawing | null>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [StockDrawing](https://chart.syidax.com/ko/docs/types/StockDrawing.md) — 타입 정의
- [StockDrawingInput](https://chart.syidax.com/ko/docs/types/StockDrawingInput.md) — 타입 정의

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |
| `patch` | `Partial<Omit<StockDrawing, 'id'>>` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [StockDrawing](https://chart.syidax.com/ko/docs/types/StockDrawing.md) — 타입 정의

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |
| `deltaTime` | `number` | 필수 |
| `deltaPrice` | `number` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### removeDrawing

remove one drawing.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### clearDrawings

clear the document (undoable).

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

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### undoDrawings

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

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

반환 타입: `Promise<{ count: number; canUndo: boolean; canRedo: boolean }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### redoDrawings

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

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

반환 타입: `Promise<{ count: number; canUndo: boolean; canRedo: boolean }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### getDrawings

The current document (deep-copied, serialisable).

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

반환 타입: `Promise<StockDrawing[]>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [StockDrawing](https://chart.syidax.com/ko/docs/types/StockDrawing.md) — 타입 정의

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

### exportDrawings

Versioned JSON export of the document.

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

반환 타입: `Promise<string>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### loadDrawings

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

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `json` | `string` | 필수 |

반환 타입: `Promise<number>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |

반환 타입: `Promise<Array<{ x: number; y: number }> | null>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### setActiveTool

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

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `tool` | `string \| null` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### getActiveTool

비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.

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

반환 타입: `Promise<string | null>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `scale` | `number` | 필수 |
| `anchorFraction` | `number` | 선택 |

반환 타입: `Promise<{ from: number; to: number }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### panByBars

Pan programmatically by (ungrouped) bars.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `bars` | `number` | 필수 |

반환 타입: `Promise<{ from: number; to: number }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### setData

Replace the bar set.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `data` | `StockDataInput` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `tick` | `StockTickInput` | 필수 |

반환 타입: `Promise<{ appended: boolean; time: number } | null>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [StockTickInput](https://chart.syidax.com/ko/docs/types/StockTickInput.md) — 타입 정의

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `ticks` | `ReadonlyArray<StockTickInput>` | 필수 |

반환 타입: `Promise<{ appended: boolean; time: number } | null>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [StockTickInput](https://chart.syidax.com/ko/docs/types/StockTickInput.md) — 타입 정의

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

반환 타입: `Promise<string>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### importTemplate

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

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `json` | `string` | 필수 |

반환 타입: `Promise<{ ok: boolean; applied: string[] }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### getSnapshotSVG

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

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

반환 타입: `Promise<string | null>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### getCSV

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

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

반환 타입: `Promise<string>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### getBarCounts

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

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

반환 타입: `Promise<{ bars: number; from: number; to: number }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### getPaneLayout

Current pane rects (layout-local px).

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

반환 타입: `Promise<{ panes: Array<{ id: string; top: number; height: number }> }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### addPane

Append a pane (default at the bottom).

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `pane` | `PaneSpecInput` | 필수 |
| `at` | `number` | 선택 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [PaneSpecInput](https://chart.syidax.com/ko/docs/types/PaneSpecInput.md) — 타입 정의

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

### removePane

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

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### reorderPane

Move a pane to a new stack position.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |
| `to` | `number` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

### setPaneWeight

Set a pane's weight directly.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `id` | `string` | 필수 |
| `weight` | `number` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `count` | `number` | 선택 |

반환 타입: `Promise<number>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `range` | `StockRangeKey` | 필수 |

반환 타입: `Promise<{ from: number; to: number }>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [StockRangeKey](https://chart.syidax.com/ko/docs/types/StockRangeKey.md) — 타입 정의

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

### setResolution

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

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

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `resolution` | `StockResolution` | 필수 |

반환 타입: `Promise<void>`. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.

- [StockResolution](https://chart.syidax.com/ko/docs/types/StockResolution.md) — 타입 정의