sy-stock-chart

Stock Chart

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

sy-stock-chart

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

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

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

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

전체 적용 예제

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>

Properties

width

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

항목값
JavaScript 프로퍼티width
HTML attributewidth
타입number
기본값760

height

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

항목값
JavaScript 프로퍼티height
HTML attributeheight
타입number
기본값420

brandPosition

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

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

data

시간순 OHLCV 데이터입니다.

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

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

session

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

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

visibleFrom

Visible bar range (indices; defaults to everything).

항목값
JavaScript 프로퍼티visibleFrom
HTML attributevisible-from
타입number
기본값undefined

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

visibleTo

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

항목값
JavaScript 프로퍼티visibleTo
HTML attributevisible-to
타입number
기본값undefined

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

showNavigator

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

항목값
JavaScript 프로퍼티showNavigator
HTML attributeshow-navigator
타입boolean
기본값false

showRangeSelector

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

항목값
JavaScript 프로퍼티showRangeSelector
HTML attributeshow-range-selector
타입boolean
기본값false

resolution

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

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

dataGrouping

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

항목값
JavaScript 프로퍼티dataGrouping
HTML attributedata-grouping
타입string
기본값'auto'

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

historyThreshold

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

항목값
JavaScript 프로퍼티historyThreshold
HTML attributehistory-threshold
타입number
기본값30

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

seriesStyle

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

항목값
JavaScript 프로퍼티seriesStyle
HTML attributeseries-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

brickSize

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

항목값
JavaScript 프로퍼티brickSize
HTML attributebrick-size
타입number
기본값undefined

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

reversalPct

Kagi reversal, percent (default 4).

항목값
JavaScript 프로퍼티reversalPct
HTML attributereversal-pct
타입number
기본값4

boxSize

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

항목값
JavaScript 프로퍼티boxSize
HTML attributebox-size
타입number
기본값undefined

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

reversalBoxes

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

항목값
JavaScript 프로퍼티reversalBoxes
HTML attributereversal-boxes
타입number
기본값3

lineBreakCount

Line Break lookback (default 3-line break).

항목값
JavaScript 프로퍼티lineBreakCount
HTML attributeline-break-count
타입number
기본값3

upColor

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

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

downColor

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

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

baselineValue

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

항목값
JavaScript 프로퍼티baselineValue
HTML attributebaseline-value
타입number
기본값undefined

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

lineColor

Line/area/hilo ink.

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

priceScaleMode

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

항목값
JavaScript 프로퍼티priceScaleMode
HTML attributeprice-scale
타입string
기본값'linear'

referenceLines

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

항목값
JavaScript 프로퍼티referenceLines
HTML attributereference-lines
타입string
기본값undefined

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

bid

Quotes for the bid/ask reference lines.

항목값
JavaScript 프로퍼티bid
HTML attributebid
타입number
기본값undefined

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

ask

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

항목값
JavaScript 프로퍼티ask
HTML attributeask
타입number
기본값undefined

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

crosshair

Crosshair + OHLC legend on hover ().

항목값
JavaScript 프로퍼티crosshair
HTML attributecrosshair
타입boolean
기본값true

showLegend

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

항목값
JavaScript 프로퍼티showLegend
HTML attributeshow-legend
타입boolean
기본값true

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

flags

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

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

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

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

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

showToolbar

Show the left drawing-tools toolbar ().

항목값
JavaScript 프로퍼티showToolbar
HTML attributeshow-toolbar
타입boolean
기본값false

exportScale

PNG export pixel scale ().

항목값
JavaScript 프로퍼티exportScale
HTML attributeexport-scale
타입number
기본값2

locale

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

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

trades

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

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

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

positions

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

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

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

chartTitle

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

항목값
JavaScript 프로퍼티chartTitle
HTML attributechart-title
타입string
기본값undefined

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

chartSubtitle

차트 내부 부제목입니다.

항목값
JavaScript 프로퍼티chartSubtitle
HTML attributechart-subtitle
타입string
기본값undefined

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

Events

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

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

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

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

resolutionChanged

The resolution changed.

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

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

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

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

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

compareChanged

The compare set changed.

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

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

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

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

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[] }
});

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

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

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

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

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

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[] }
});

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

Methods

addCompare

Add a compare overlay (duplicate ids replace).

typescript
addCompare(symbol: CompareSymbolInput): Promise<void>
인수타입필수 여부
symbolCompareSymbolInput필수

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

removeCompare

Remove a compare overlay by id.

typescript
removeCompare(id: string): Promise<void>
인수타입필수 여부
idstring필수

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

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>
인수타입필수 여부
specStockIndicatorInput필수

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

removeIndicator

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

typescript
removeIndicator(id: string): Promise<void>
인수타입필수 여부
idstring필수

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

updateIndicator

Merge params into an instance (by resolved id).

typescript
updateIndicator(id: string, params: Record<string, number | string>): Promise<void>
인수타입필수 여부
idstring필수
paramsRecord<string, number | string>필수

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

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로 기다리세요.

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[] }>
인수타입필수 여부
definitionIndicatorDefinition필수

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

undefineIndicator

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

typescript
undefineIndicator(kind: string): Promise<{ removed: boolean }>
인수타입필수 여부
kindstring필수

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

getIndicatorKinds

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

typescript
getIndicatorKinds(): Promise<string[]>

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

getIndicatorValues

Computed columns for one instance over the current render tape.

typescript
getIndicatorValues(id: string): Promise<Record<string, Array<number | null>> | null>
인수타입필수 여부
idstring필수

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

addDrawing

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

typescript
addDrawing(input: StockDrawingInput): Promise<StockDrawing | null>
인수타입필수 여부
inputStockDrawingInput필수

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

updateDrawing

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

typescript
updateDrawing(id: string, patch: Partial<Omit<StockDrawing, 'id'>>): Promise<void>
인수타입필수 여부
idstring필수
patchPartial<Omit<StockDrawing, 'id'>>필수

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

moveDrawing

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

typescript
moveDrawing(id: string, deltaTime: number, deltaPrice: number): Promise<void>
인수타입필수 여부
idstring필수
deltaTimenumber필수
deltaPricenumber필수

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

removeDrawing

remove one drawing.

typescript
removeDrawing(id: string): Promise<void>
인수타입필수 여부
idstring필수

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

clearDrawings

clear the document (undoable).

typescript
clearDrawings(): Promise<void>

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

undoDrawings

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

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

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

redoDrawings

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

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

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

getDrawings

The current document (deep-copied, serialisable).

typescript
getDrawings(): Promise<StockDrawing[]>

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

exportDrawings

Versioned JSON export of the document.

typescript
exportDrawings(): Promise<string>

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

loadDrawings

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

typescript
loadDrawings(json: string): Promise<number>
인수타입필수 여부
jsonstring필수

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

getDrawingPoints

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

typescript
getDrawingPoints(id: string): Promise<Array<{ x: number; y: number }> | null>
인수타입필수 여부
idstring필수

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

setActiveTool

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

typescript
setActiveTool(tool: string | null): Promise<void>
인수타입필수 여부
toolstring | null필수

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

getActiveTool

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

typescript
getActiveTool(): Promise<string | null>

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

zoomBy

Zoom programmatically around an anchor fraction (default centre).

typescript
zoomBy(scale: number, anchorFraction?: number): Promise<{ from: number; to: number }>
인수타입필수 여부
scalenumber필수
anchorFractionnumber선택

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

panByBars

Pan programmatically by (ungrouped) bars.

typescript
panByBars(bars: number): Promise<{ from: number; to: number }>
인수타입필수 여부
barsnumber필수

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

setData

Replace the bar set.

typescript
setData(data: StockDataInput): Promise<void>
인수타입필수 여부
dataStockDataInput필수

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

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>
인수타입필수 여부
tickStockTickInput필수

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

appendTicks

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

typescript
appendTicks(ticks: ReadonlyArray<StockTickInput>): Promise<{ appended: boolean; time: number } | null>
인수타입필수 여부
ticksReadonlyArray<StockTickInput>필수

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

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로 기다리세요.

importTemplate

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

typescript
importTemplate(json: string): Promise<{ ok: boolean; applied: string[] }>
인수타입필수 여부
jsonstring필수

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

getSnapshotSVG

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

typescript
getSnapshotSVG(): Promise<string | null>

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

getCSV

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

typescript
getCSV(): Promise<string>

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

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로 기다리세요.

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로 기다리세요.

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로 기다리세요.

print

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

typescript
print(): Promise<void>

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

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로 기다리세요.

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로 기다리세요.

addPane

Append a pane (default at the bottom).

typescript
addPane(pane: PaneSpecInput, at?: number): Promise<void>
인수타입필수 여부
panePaneSpecInput필수
atnumber선택

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

removePane

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

typescript
removePane(id: string): Promise<void>
인수타입필수 여부
idstring필수

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

reorderPane

Move a pane to a new stack position.

typescript
reorderPane(id: string, to: number): Promise<void>
인수타입필수 여부
idstring필수
tonumber필수

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

setPaneWeight

Set a pane's weight directly.

typescript
setPaneWeight(id: string, weight: number): Promise<void>
인수타입필수 여부
idstring필수
weightnumber필수

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

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>
인수타입필수 여부
countnumber선택

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

applyRange

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

typescript
applyRange(range: StockRangeKey): Promise<{ from: number; to: number }>
인수타입필수 여부
rangeStockRangeKey필수

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

setResolution

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

typescript
setResolution(resolution: StockResolution): Promise<void>
인수타입필수 여부
resolutionStockResolution필수

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