sy-stock-volume
Stock Volume
가격과 동일한 시간축의 거래량을 표시합니다.
sy-stock-volume
가격 패널 아래의 거래 활동을 비교하세요.
가격과 거래량의 데이터·세션·visibleFrom/visibleTo를 같이 갱신해야 시간축이 일치합니다.
기본 차트 등급: Pro. 추가 렌더러·커스텀 브랜딩 등 기능의 권한은 별도입니다.
| 입력 | 데이터 설명 |
|---|---|
data | 가격과 같은 OHLCV 배열. volume이 거래량입니다. |
visibleFrom | 표시할 시간 범위의 시작입니다. |
visibleTo | 표시할 시간 범위의 끝입니다. |
- 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';
import { defineCustomElement as define1 } from '@syidax/advanced-pro/components/sy-stock-volume.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-volume",
"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",
"width": 640,
"height": 160,
"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-volume 예제 차트');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('rendered', event.detail);
};
chart.addEventListener('rendered', 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('rendered', onEvent);
elements[0].removeEventListener('visibleRangeChanged', onRange);
container.replaceChildren();
}
</script>Properties
width
차트의 너비를 px 단위로 지정합니다. 컨테이너 너비가 변하는 앱에서는 ResizeObserver에서 width를 갱신하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | width |
| HTML attribute | width |
| 타입 | number |
| 기본값 | 760 |
height
차트의 높이를 px 단위로 지정합니다. 축, 제목과 범례가 차지하는 공간을 함께 고려하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | height |
| HTML attribute | height |
| 타입 | number |
| 기본값 | 160 |
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 배열. volume이 거래량입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | data |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | StockDataInput |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
session
허용값: 24x7, us-equity. 기본값: '24x7'.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | session |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | '24x7' | 'us-equity' | StockSessionInput |
| 기본값 | '24x7' |
| 타입에 포함된 리터럴 | 24x7, us-equity |
- StockSessionInput
타입 정의
visibleFrom
표시할 시간 범위의 시작입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | visibleFrom |
| HTML attribute | visible-from |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
visibleTo
표시할 시간 범위의 끝입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | visibleTo |
| HTML attribute | visible-to |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
upColor
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | upColor |
| HTML attribute | up-color |
| 타입 | string |
| 기본값 | 'rgba(22, 163, 74, 0.55)' |
downColor
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | downColor |
| HTML attribute | down-color |
| 타입 | string |
| 기본값 | 'rgba(220, 38, 38, 0.55)' |
chartTitle
차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | chartTitle |
| HTML attribute | chart-title |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
Events
rendered
차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.
이벤트 이름: rendered. 대소문자를 구분합니다. payload는 CustomEvent<{ bars: number; maxVolume: number }>의 detail에서 읽습니다.
chart.addEventListener('rendered', event => {
console.log(event.detail); // { bars: number; maxVolume: number }
});Methods
setData
Replace the bar set.
setData(data: StockDataInput): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
data | StockDataInput | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.