# Stock Volume

가격과 동일한 시간축의 거래량을 표시합니다.

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

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

## sy-stock-volume

가격 패널 아래의 거래 활동을 비교하세요.

가격과 거래량의 데이터·세션·visibleFrom/visibleTo를 같이 갱신해야 시간축이 일치합니다.

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

| 입력 | 데이터 설명 |
| --- | --- |
| `data` | 가격과 같은 OHLCV 배열. volume이 거래량입니다. |
| `visibleFrom` | 표시할 시간 범위의 시작입니다. |
| `visibleTo` | 표시할 시간 범위의 끝입니다. |

- [Components에서 실행하기](https://chart.syidax.com/charts/stock-volume) — 옵션 변경과 프레임워크별 코드
- [공통 설치와 연결](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';
  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>
```

<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` |
| 기본값 | `160` |

<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 배열. volume이 거래량입니다.

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

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

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

### session

허용값: 24x7, us-equity. 기본값: '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

표시할 시간 범위의 시작입니다.

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

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

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

### visibleTo

표시할 시간 범위의 끝입니다.

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

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

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

### upColor

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `upColor` |
| HTML attribute | `up-color` |
| 타입 | `string` |
| 기본값 | `'rgba(22, 163, 74, 0.55)'` |

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

### downColor

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `downColor` |
| HTML attribute | `down-color` |
| 타입 | `string` |
| 기본값 | `'rgba(220, 38, 38, 0.55)'` |

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

### chartTitle

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

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

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

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

## Events

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

### rendered

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

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

```javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // { bars: number; maxVolume: number }
});
```

<a id="methods"></a>

## Methods

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

### setData

Replace the bar set.

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

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

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