Stock Flags.
PRO가격 데이터의 시간 위치에 이벤트를 붙입니다.
LIVE EXAMPLE
공시 이벤트
차트를 조작하면 선택·범위 변경 결과가 여기에 표시됩니다.
옵션변경 사항이 미리보기와 코드에 반영됩니다.
표현과 스타일2
제목과 크기2
가격 데이터의 시간 위치에 이벤트를 표시합니다. 모든 값은 예시 데이터입니다.
코드 보기
현재 미리보기
<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';
import { defineCustomElement as define1 } from '@syidax/advanced-pro/components/sy-stock-flags.js';
define0();
define1();
// Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
// 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
const specs = [
{
"tag": "sy-stock-chart",
"id": "price-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",
"showNavigator": false,
"showRangeSelector": false,
"height": 250,
"width": 640
}
},
{
"id": "example-chart",
"tag": "sy-stock-flags",
"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
}
],
"flags": [
{
"id": "earnings",
"time": 1767916800000,
"text": "E",
"title": "실적 발표 (예시)"
},
{
"id": "dividend",
"time": 1769126400000,
"text": "D",
"title": "배당 기준일 (예시)"
}
],
"session": "24x7",
"width": 640,
"height": 84,
"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-flags 예제 차트');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('flagClick', event.detail);
};
chart.addEventListener('flagClick', onEvent);
const onRange = event => {
chart.visibleFrom = event.detail.from;
chart.visibleTo = event.detail.to;
};
elements[0].addEventListener('visibleRangeChanged', onRange);
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);
elements[0].removeEventListener('visibleRangeChanged', onRange);
container.replaceChildren();
}
</script>사용과 데이터
#실적 발표·배당·기업 일정의 시점을 표시하세요.
플래그 날짜가 표시 구간 밖이면 보이지 않습니다. 가격 패널과 범위·세션을 같이 유지하세요.
데이터 계약
| 프로퍼티 | 입력 형식 |
|---|---|
data | 플래그의 시간 위치를 결정하는 가격 배열입니다. |
flags | { id?, time, text, title? } 이벤트 배열입니다. |
데이터를 갱신할 때
배열 안의 값을 직접 바꾸기보다 새 배열·객체를 프로퍼티에 할당하세요. 차트의 이벤트는 event.detail로 선택 결과를 전달합니다. 화면을 해제할 때 ResizeObserver와 앱에서 등록한 이벤트 리스너를 정리하세요.
기능별 예제
#4개의 기능 예제를 직접 조작하고 코드를 확인하세요. ‘미리보기에서 편집’을 누르면 위 설정 패널에서 옵션을 더 조합할 수 있습니다.
이벤트 레이블PRO
공시·실적 이벤트의 레이블과 설명을 확인합니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
OverviewPRO
Overview의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
DashboardPRO
Dashboard의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
Streaming · 이벤트 추가PRO
새 시점의 가격 데이터와 거래량·이벤트를 함께 갱신합니다. 최근 32개 시점을 유지하며 시작·일시정지·초기화를 조작할 수 있습니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
화면에 적용하기
#미리보기 아래 코드 탭에서 현재 예제의 전체 데이터, 옵션, 이벤트 연결과 반응형 크기 처리를 확인하고 복사할 수 있습니다. 설치된 패키지를 해석할 수 있는 Vite 등의 앱 프로젝트에서 사용하세요.
보조 컴포넌트는 예제처럼 대상 차트·공통 데이터와 연결하세요.
API 레퍼런스
#sy-stock-flags의 전체 공개 API입니다. 객체와 배열은 JavaScript 프로퍼티로 전달하세요. 이름을 선택하면 적용 코드와 타입 계약을 확인할 수 있습니다.
주요 속성
| 속성 / 프로퍼티 | 타입 / 기본값 | 설명 |
|---|---|---|
number기본값 760 | 차트의 너비(px). 컨테이너가 바뀌면 ResizeObserver로 갱신합니다. | |
number기본값 84 | 차트의 높이(px). | |
| brandLogo | string기본값 undefined | 기본값은 Syidax 로고입니다. Pro의 chart.branding 권한으로 none 또는 PNG·JPEG·WebP data URL을 사용할 수 있습니다. |
| brandPosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'기본값 'bottom-right' | 로고를 고정할 코너입니다. Community·Pro, 화면과 이미지 내보내기에 동일하게 적용됩니다. |
StockDataInput기본값 undefined | 플래그의 시간 위치를 결정하는 가격 배열입니다. | |
ReadonlyArray<StockFlagInput>기본값 undefined | { id?, time, text, title? } 이벤트 배열입니다. | |
| chartTitle | string기본값 undefined | 차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요. |
나머지 속성 3
| 속성 / 프로퍼티 | 타입 / 기본값 | 설명 |
|---|---|---|
'24x7' | 'us-equity' | StockSessionInput기본값 '24x7' | 허용값: 24x7, us-equity. 기본값: '24x7'. | |
| visibleFrom | number기본값 undefined | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number. |
| visibleTo | number기본값 undefined | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number. |
이벤트 1
| 이벤트 | detail 타입 | 설명 |
|---|---|---|
{ id: string; time: number; text: string; title?: string } | CustomEvent.detail 타입: { id: string; time: number; text: string; title?: string }. 이벤트 이름은 대소문자를 구분합니다. |
일치하는 API가 없습니다.