sy-stock-chart
Stock Chart
가격 이력과 금융 탐색 기능을 함께 제공합니다.
sy-stock-chart
기간 선택·Navigator·플래그를 갖춘 금융 화면을 구성하세요.
날짜의 시간대와 거래 세션을 맞추세요. 예제는 가상 데이터이며 표시 기능의 사용법입니다.
기본 차트 등급: Pro. 추가 렌더러·커스텀 브랜딩 등 기능의 권한은 별도입니다.
| 입력 | 데이터 설명 |
|---|---|
data | 시간순 OHLCV 데이터입니다. |
session | 24x7 또는 거래 세션을 지정합니다. |
flags | time·text·title을 가진 이벤트 목록입니다. |
seriesStyle | 가격을 그리는 표현입니다. |
- Components에서 실행하기
옵션 변경과 프레임워크별 코드
- 공통 설치와 연결
전체 적용 예제
<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 attribute | width |
| 타입 | number |
| 기본값 | 760 |
height
차트의 높이를 px 단위로 지정합니다. 축, 제목과 범례가 차지하는 공간을 함께 고려하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | height |
| HTML attribute | height |
| 타입 | number |
| 기본값 | 420 |
brandLogo
기본값은 Syidax 심볼과 워드마크입니다. Pro의 chart.branding 권한으로 none을 지정해 제거하거나 PNG·JPEG·WebP data URL로 교체할 수 있습니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | brandLogo |
| HTML attribute | brand-logo |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
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 |
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 |
- StockSessionInput
타입 정의
visibleFrom
Visible bar range (indices; defaults to everything).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | visibleFrom |
| HTML attribute | visible-from |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
visibleTo
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | visibleTo |
| HTML attribute | visible-to |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
showRangeSelector
Show the 1M/3M/6M/YTD/1Y/All + resolution button rows ().
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | showRangeSelector |
| HTML attribute | show-range-selector |
| 타입 | boolean |
| 기본값 | false |
resolution
Tape resolution: 1d raw / 1w / 1M calendar roll-ups.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | resolution |
| HTML attribute | resolution |
| 타입 | StockResolution |
| 기본값 | '1d' |
| 허용값 | 1d, 1w, 1M |
- StockResolution
타입 정의
dataGrouping
View-density grouping: auto (default) / off / a forced factor.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | dataGrouping |
| HTML attribute | data-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 attribute | history-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는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- PaneSpecInput
타입 정의
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
타입 정의
- DerivedStockStyle
타입 정의
brickSize
Renko brick size in price units (default auto — close range/50, nice).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | brickSize |
| HTML attribute | brick-size |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
reversalPct
Kagi reversal, percent (default 4).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | reversalPct |
| HTML attribute | reversal-pct |
| 타입 | number |
| 기본값 | 4 |
boxSize
Point & Figure box size (default auto) and reversal boxes (default 3).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | boxSize |
| HTML attribute | box-size |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
reversalBoxes
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | reversalBoxes |
| HTML attribute | reversal-boxes |
| 타입 | number |
| 기본값 | 3 |
lineBreakCount
Line Break lookback (default 3-line break).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | lineBreakCount |
| HTML attribute | line-break-count |
| 타입 | number |
| 기본값 | 3 |
upColor
Up/down candle colours (close ≥ open → up).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | upColor |
| HTML attribute | up-color |
| 타입 | string |
| 기본값 | '#16a34a' |
downColor
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | downColor |
| HTML attribute | down-color |
| 타입 | string |
| 기본값 | '#dc2626' |
baselineValue
Baseline anchor for series-style="baseline" (default first visible close).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | baselineValue |
| HTML attribute | baseline-value |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
lineColor
Line/area/hilo ink.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | lineColor |
| HTML attribute | line-color |
| 타입 | string |
| 기본값 | '#2563eb' |
priceScaleMode
Right-scale space: linear (default) / log / percent / indexed.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | priceScaleMode |
| HTML attribute | price-scale |
| 타입 | string |
| 기본값 | 'linear' |
referenceLines
Reference lines, comma list: current,previous-close,high,low,bid,ask.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | referenceLines |
| HTML attribute | reference-lines |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
bid
Quotes for the bid/ask reference lines.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | bid |
| HTML attribute | bid |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
ask
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | ask |
| HTML attribute | ask |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
crosshair
Crosshair + OHLC legend on hover ().
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | crosshair |
| HTML attribute | crosshair |
| 타입 | boolean |
| 기본값 | true |
showLegend
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | showLegend |
| HTML attribute | show-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는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- CompareSymbolInput
타입 정의
flags
time·text·title을 가진 이벤트 목록입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | flags |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | ReadonlyArray<StockFlagInput> |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- StockFlagInput
타입 정의
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
타입 정의
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
타입 정의
showToolbar
Show the left drawing-tools toolbar ().
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | showToolbar |
| HTML attribute | show-toolbar |
| 타입 | boolean |
| 기본값 | false |
exportScale
PNG export pixel scale ().
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | exportScale |
| HTML attribute | export-scale |
| 타입 | number |
| 기본값 | 2 |
locale
BCP-47 locale (): month labels + price/P&L number formats.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | locale |
| HTML attribute | locale |
| 타입 | string |
| 기본값 | 'en-US' |
trades
Executed trades (): [{time, side: buy|sell, price, quantity?}].
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | trades |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | ReadonlyArray<StockTradeInput> |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- StockTradeInput
타입 정의
positions
Open positions (): [{side: long|short, entryPrice, quantity}] — live P&L badges.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | positions |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | ReadonlyArray<StockPositionInput> |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- StockPositionInput
타입 정의
chartTitle
차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | chartTitle |
| HTML attribute | chart-title |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
chartSubtitle
차트 내부 부제목입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | chartSubtitle |
| HTML attribute | chart-subtitle |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
Events
rendered
차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.
이벤트 이름: rendered. 대소문자를 구분합니다. payload는 CustomEvent<{ bars: number; visibleBars: number; renderMs: number }>의 detail에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
chart.addEventListener('rangeSelected', event => {
console.log(event.detail); // { range: StockRangeKey; from: number; to: number }
});- StockRangeKey
타입 정의
resolutionChanged
The resolution changed.
이벤트 이름: resolutionChanged. 대소문자를 구분합니다. payload는 CustomEvent<{ resolution: StockResolution }>의 detail에서 읽습니다.
chart.addEventListener('resolutionChanged', event => {
console.log(event.detail); // { resolution: StockResolution }
});- StockResolution
타입 정의
historyRequested
A history load started / finished.
이벤트 이름: historyRequested. 대소문자를 구분합니다. payload는 CustomEvent<{ oldestTime: number; count: number }>의 detail에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
chart.addEventListener('exported', event => {
console.log(event.detail); // { format: string; filename: string }
});Methods
addCompare
Add a compare overlay (duplicate ids replace).
addCompare(symbol: CompareSymbolInput): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
symbol | CompareSymbolInput | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- CompareSymbolInput
타입 정의
removeCompare
Remove a compare overlay by id.
removeCompare(id: string): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
반환 타입: 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.
addIndicator(spec: StockIndicatorInput): Promise<StockIndicatorInput>| 인수 | 타입 | 필수 여부 |
|---|---|---|
spec | StockIndicatorInput | 필수 |
반환 타입: Promise<StockIndicatorInput>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- StockIndicatorInput
타입 정의
removeIndicator
Remove an indicator by resolved id (its synthesized pane goes with it).
removeIndicator(id: string): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
updateIndicator
Merge params into an instance (by resolved id).
updateIndicator(id: string, params: Record<string, number | string>): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
params | Record<string, number | string> | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getIndicators
Resolved indicator list (serialisable — no definition objects).
getIndicators(): Promise<Array<{
id: string; kind: string; params: Record<string, number>; linkedTo: string; paneId: string | null; label: string;
}>>반환 타입: `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).
defineIndicator(definition: IndicatorDefinition): Promise<{ ok: boolean; errors: string[] }>| 인수 | 타입 | 필수 여부 |
|---|---|---|
definition | IndicatorDefinition | 필수 |
반환 타입: Promise<{ ok: boolean; errors: string[] }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- IndicatorDefinition
타입 정의
undefineIndicator
Remove a definition; live instances of the kind resolve away.
undefineIndicator(kind: string): Promise<{ removed: boolean }>| 인수 | 타입 | 필수 여부 |
|---|---|---|
kind | string | 필수 |
반환 타입: Promise<{ removed: boolean }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getIndicatorKinds
Registered indicator kinds (built-ins + custom), sorted.
getIndicatorKinds(): Promise<string[]>반환 타입: Promise<string[]>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getIndicatorValues
Computed columns for one instance over the current render tape.
getIndicatorValues(id: string): Promise<Record<string, Array<number | null>> | null>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
반환 타입: Promise<Record<string, Array<number | null>> | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
addDrawing
Add a drawing (data-coordinate anchors); returns it with the minted id.
addDrawing(input: StockDrawingInput): Promise<StockDrawing | null>| 인수 | 타입 | 필수 여부 |
|---|---|---|
input | StockDrawingInput | 필수 |
반환 타입: Promise<StockDrawing | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- StockDrawing
타입 정의
- StockDrawingInput
타입 정의
updateDrawing
Merge a patch (anchors/style/meta/visible/locked) into a drawing.
updateDrawing(id: string, patch: Partial<Omit<StockDrawing, 'id'>>): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
patch | Partial<Omit<StockDrawing, 'id'>> | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- StockDrawing
타입 정의
moveDrawing
Translate a drawing by data-space deltas (locked drawings hold).
moveDrawing(id: string, deltaTime: number, deltaPrice: number): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
deltaTime | number | 필수 |
deltaPrice | number | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
removeDrawing
remove one drawing.
removeDrawing(id: string): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
clearDrawings
clear the document (undoable).
clearDrawings(): Promise<void>반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
undoDrawings
비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
undoDrawings(): Promise<{ count: number; canUndo: boolean; canRedo: boolean }>반환 타입: Promise<{ count: number; canUndo: boolean; canRedo: boolean }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
redoDrawings
비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
redoDrawings(): Promise<{ count: number; canUndo: boolean; canRedo: boolean }>반환 타입: Promise<{ count: number; canUndo: boolean; canRedo: boolean }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getDrawings
The current document (deep-copied, serialisable).
getDrawings(): Promise<StockDrawing[]>반환 타입: Promise<StockDrawing[]>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- StockDrawing
타입 정의
exportDrawings
Versioned JSON export of the document.
exportDrawings(): Promise<string>반환 타입: Promise<string>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
loadDrawings
Restore a serialized document (undoable — it goes through the history).
loadDrawings(json: string): Promise<number>| 인수 | 타입 | 필수 여부 |
|---|---|---|
json | string | 필수 |
반환 타입: Promise<number>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getDrawingPoints
Projected css-px points for one drawing on the CURRENT render tape.
getDrawingPoints(id: string): Promise<Array<{ x: number; y: number }> | null>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
반환 타입: Promise<Array<{ x: number; y: number }> | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
setActiveTool
Activate a placement tool (null = the select cursor).
setActiveTool(tool: string | null): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
tool | string | null | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getActiveTool
비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
getActiveTool(): Promise<string | null>반환 타입: Promise<string | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
zoomBy
Zoom programmatically around an anchor fraction (default centre).
zoomBy(scale: number, anchorFraction?: number): Promise<{ from: number; to: number }>| 인수 | 타입 | 필수 여부 |
|---|---|---|
scale | number | 필수 |
anchorFraction | number | 선택 |
반환 타입: Promise<{ from: number; to: number }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
panByBars
Pan programmatically by (ungrouped) bars.
panByBars(bars: number): Promise<{ from: number; to: number }>| 인수 | 타입 | 필수 여부 |
|---|---|---|
bars | number | 필수 |
반환 타입: Promise<{ from: number; to: number }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
setData
Replace the bar set.
setData(data: StockDataInput): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
data | StockDataInput | 필수 |
반환 타입: 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).
appendTick(tick: StockTickInput): Promise<{ appended: boolean; time: number } | null>| 인수 | 타입 | 필수 여부 |
|---|---|---|
tick | StockTickInput | 필수 |
반환 타입: Promise<{ appended: boolean; time: number } | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- StockTickInput
타입 정의
appendTicks
Batch ticks in ONE repaint (returns the last applied result).
appendTicks(ticks: ReadonlyArray<StockTickInput>): Promise<{ appended: boolean; time: number } | null>| 인수 | 타입 | 필수 여부 |
|---|---|---|
ticks | ReadonlyArray<StockTickInput> | 필수 |
반환 타입: Promise<{ appended: boolean; time: number } | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- StockTickInput
타입 정의
exportTemplate
Export the chart CONFIGURATION as a versioned JSON template () — style/params, scale, panes, indicators, drawings, compares, flags, window/resolution/grouping. The data tape stays out (templates travel between symbols).
exportTemplate(): Promise<string>반환 타입: Promise<string>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
importTemplate
Apply a template (per-field whitelist; drawings land undoably).
importTemplate(json: string): Promise<{ ok: boolean; applied: string[] }>| 인수 | 타입 | 필수 여부 |
|---|---|---|
json | string | 필수 |
반환 타입: Promise<{ ok: boolean; applied: string[] }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getSnapshotSVG
The composed standalone SVG snapshot (canvas raster + SVG chrome + the brand).
getSnapshotSVG(): Promise<string | null>반환 타입: Promise<string | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getCSV
The tape as a CSV table (ISO time, OHLC, volume).
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.
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).
exportSVG(): Promise<void>반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
exportCSV
Download the tape as a CSV file (under a confirmed grant; getCSV stays the ungated read).
exportCSV(): Promise<void>반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
Print view with the inlined snapshot (the facade print mirror), opened under a confirmed grant.
print(): Promise<void>반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getBarCounts
Normalised bar count + visible range (diagnostics/tooling).
getBarCounts(): Promise<{ bars: number; from: number; to: number }>반환 타입: Promise<{ bars: number; from: number; to: number }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getPaneLayout
Current pane rects (layout-local px).
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).
addPane(pane: PaneSpecInput, at?: number): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
pane | PaneSpecInput | 필수 |
at | number | 선택 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- PaneSpecInput
타입 정의
removePane
Remove a pane by id (the last pane stays).
removePane(id: string): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
reorderPane
Move a pane to a new stack position.
reorderPane(id: string, to: number): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
to | number | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
setPaneWeight
Set a pane's weight directly.
setPaneWeight(id: string, weight: number): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
id | string | 필수 |
weight | number | 필수 |
반환 타입: 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.
loadOlderHistory(count?: number): Promise<number>| 인수 | 타입 | 필수 여부 |
|---|---|---|
count | number | 선택 |
반환 타입: Promise<number>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
applyRange
Apply a range button: window the CURRENT tape by calendar maths.
applyRange(range: StockRangeKey): Promise<{ from: number; to: number }>| 인수 | 타입 | 필수 여부 |
|---|---|---|
range | StockRangeKey | 필수 |
반환 타입: Promise<{ from: number; to: number }>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- StockRangeKey
타입 정의
setResolution
Switch the tape resolution (resets the window — indices change).
setResolution(resolution: StockResolution): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
resolution | StockResolution | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- StockResolution
타입 정의