sy-candlestick-chart

Candlestick

기간별 네 가격을 하나의 캔들로 보여줍니다.

sy-candlestick-chart

시가·고가·저가·종가의 변화를 탐색하세요.

예제는 가상 가격입니다. 시간대·거래 세션·수정 가격 여부를 실제 데이터와 맞추세요.

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

입력데이터 설명
data{ time, open, high, low, close, volume? } 배열입니다.
timeScaleordinal은 거래 순서, linear는 시간 간격을 반영합니다.
volumepane을 선택하면 거래량을 함께 표시합니다.

전체 적용 예제

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-candlestick-chart.js';
  define0();

  // Pro: 앱 시작 시 발급받은 인증서로 registerLicense를 완료하세요.
  // 홈페이지 미리보기의 인증서는 고객 앱에서 사용하지 않습니다.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-candlestick-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
          }
        ],
        "timeScale": "ordinal",
        "volume": "off",
        "width": 640,
        "height": 360,
        "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', 'candlestick 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', 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('pointClick', onEvent);
    container.replaceChildren();
  }
</script>

Properties

data

{ time, open, high, low, close, volume? } 배열입니다.

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

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

width

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

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

height

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

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

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

xAxis

가로축의 종류, 범주, 범위와 표시 형식을 설정합니다. category 축은 categories의 순서를 값 배열의 인덱스와 맞추세요. 여러 축을 받는 경우 축 배열로 전달할 수 있습니다.

항목값
JavaScript 프로퍼티xAxis
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입CartesianAxisInput
기본값undefined
타입에 포함된 리터럴auto, off

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

yAxis

세로축의 범위, 눈금, 레이블과 방향을 설정합니다. 비교하는 값의 단위를 맞추고, 막대의 길이를 비교할 때는 0 기준을 고려하세요.

항목값
JavaScript 프로퍼티yAxis
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입YAxisInput
기본값undefined
타입에 포함된 리터럴auto, off

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

gridLines

허용값: auto, off. 기본값: undefined.

항목값
JavaScript 프로퍼티gridLines
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입CartesianGridLinesInput
기본값undefined
타입에 포함된 리터럴auto, off

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

crosshair

Crosshair that follows the cursor across the plot.

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

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

zoom

Zoom (Storybook parity, 2026-09-10): 'x' | 'y' | 'xy' | true (x) enable the drag rectangle, the pan, the Ctrl + wheel, the pinch and the keyboard (+ / - / Escape) on the primary axes — x narrows the bar window (slots under the ordinal scale, wall time under linear), y the price; an object refines mode / drag / keyboard / minRangePx / resetButton / pan / wheel / pinch / inside. Off by default; the methods (zoomTo / zoomBy / panBy / resetZoom) work regardless of the gesture switches.

항목값
JavaScript 프로퍼티zoom
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입CartesianZoomInput
기본값undefined
타입에 포함된 리터럴auto, off, true, false, x, y, xy, inside

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

xMin

Explicit domain ends (an omitted end follows the bars; x-axis / y-axis min / max also set them).

항목값
JavaScript 프로퍼티xMin
HTML attributex-min
타입number
기본값undefined

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

xMax

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

항목값
JavaScript 프로퍼티xMax
HTML attributex-max
타입number
기본값undefined

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

yMin

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

항목값
JavaScript 프로퍼티yMin
HTML attributey-min
타입number
기본값undefined

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

yMax

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

항목값
JavaScript 프로퍼티yMax
HTML attributey-max
타입number
기본값undefined

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

padding

The price padding above and below the bars (a fraction of the span; default 0.05).

항목값
JavaScript 프로퍼티padding
HTML attributepadding
타입number
기본값0.05

upColor

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

항목값
JavaScript 프로퍼티upColor
HTML attributeup-color
타입string
기본값DEFAULT_UP_COLOR

downColor

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

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

flatColor

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

항목값
JavaScript 프로퍼티flatColor
HTML attributeflat-color
타입string
기본값DEFAULT_FLAT_COLOR

candleWidth

The body's share of the bar pitch (0 … 1; default 0.7).

항목값
JavaScript 프로퍼티candleWidth
HTML attributecandle-width
타입number
기본값CANDLE_DEFAULT_WIDTH_RATIO

candleMinPx

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

항목값
JavaScript 프로퍼티candleMinPx
HTML attributecandle-min-px
타입number
기본값CANDLE_DEFAULT_MIN_PX

candleMaxPx

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

항목값
JavaScript 프로퍼티candleMaxPx
HTML attributecandle-max-px
타입number
기본값CANDLE_DEFAULT_MAX_PX

wickWidth

The wick width in CSS px.

항목값
JavaScript 프로퍼티wickWidth
HTML attributewick-width
타입number
기본값1

bodyMinPx

The minimum body height in CSS px (a doji stays visible).

항목값
JavaScript 프로퍼티bodyMinPx
HTML attributebody-min-px
타입number
기본값1

barStyle

candle (default) or ohlc (a high–low spine, an open tick left, a close tick right); hlc (no open tick). <sy-ohlc-chart> takes ohlc / hlc.

항목값
JavaScript 프로퍼티barStyle
HTML attributebar-style
타입CandlestickBarStyle
기본값'candle'
허용값candle, ohlc, hlc, hilo

tickLength

(carry-over D5) — the OHLC / HLC tick length in CSS px (default: the body half-width).

항목값
JavaScript 프로퍼티tickLength
HTML attributetick-length
타입number
기본값undefined

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

fillAlpha

(carry-over D5) — the band fill alpha 0 … 1 (default 0.12).

항목값
JavaScript 프로퍼티fillAlpha
HTML attributefill-alpha
타입number
기본값undefined

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

bodyStyle

solid (default), hollow, or hollow-up (rising bars hollow, falling filled).

항목값
JavaScript 프로퍼티bodyStyle
HTML attributebody-style
타입CandlestickBodyStyle
기본값'solid'
허용값solid, hollow, hollow-up

bodyBorderPx

the hollow ring's border in CSS px.

항목값
JavaScript 프로퍼티bodyBorderPx
HTML attributebody-border-px
타입number
기본값1

wickColor

the wick colour; auto follows the body colour.

항목값
JavaScript 프로퍼티wickColor
HTML attributewick-color
타입string
기본값'auto'

antialias

the edge coverage: auto (on while the pitch is at least two device px), on, off.

항목값
JavaScript 프로퍼티antialias
HTML attributeantialias
타입CandlestickAntialias
기본값'auto'
허용값auto, off, on

pixelSnap

snap the body and the wick to integer device-px widths (crisp, uniform candles).

항목값
JavaScript 프로퍼티pixelSnap
HTML attributepixel-snap
타입boolean
기본값true

timeScale

ordinal은 거래 순서, linear는 시간 간격을 반영합니다.

항목값
JavaScript 프로퍼티timeScale
HTML attributetime-scale
타입CandlestickTimeScale
기본값'ordinal'
허용값linear, ordinal

session

the exchange session the labels read: 24x7, us-equity, or an object / JSON string { timezone, sessions, holidays, closedWeekdays }.

항목값
JavaScript 프로퍼티session
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입CandlestickSessionInput | string
기본값'24x7'

labelLocale

the BCP-47 locale of the month labels.

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

volume

pane을 선택하면 거래량을 함께 표시합니다.

항목값
JavaScript 프로퍼티volume
HTML attributevolume
타입CandlestickVolumeMode
기본값'off'
허용값off, pane

volumeHeight

the volume pane's share of the plot height (0.05 … 0.8).

항목값
JavaScript 프로퍼티volumeHeight
HTML attributevolume-height
타입number
기본값0.25

volumeUpColor

the volume bar colours; auto follows up-color / down-color.

항목값
JavaScript 프로퍼티volumeUpColor
HTML attributevolume-up-color
타입string
기본값'auto'

volumeDownColor

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

항목값
JavaScript 프로퍼티volumeDownColor
HTML attributevolume-down-color
타입string
기본값'auto'

volumeAlpha

the volume bars' alpha.

항목값
JavaScript 프로퍼티volumeAlpha
HTML attributevolume-alpha
타입number
기본값0.45

overlays

moving-average overlays over the closes: spec objects { kind, period?, color?, width?, label? }, a JSON string of them, or the compact "sma:20 ema:50"; the kinds are the stock chart's (sma, ema, wma, dema, tema, vwma, hma, linreg). A legend at the top of the price pane names each line and reads its value under the pointer.

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

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

chartTitle

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

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

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

chartSubtitle

차트 내부 부제목입니다.

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

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

enableMouseTracking

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

항목값
JavaScript 프로퍼티enableMouseTracking
HTML attributeenable-mouse-tracking
타입boolean
기본값true

tooltip

the bar tooltip (the shared cartesian tooltip input: show / trigger / format / html / connector / draggable …).

항목값
JavaScript 프로퍼티tooltip
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입CartesianTooltipInput
기본값undefined
타입에 포함된 리터럴auto, off

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

tooltipEnabled

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

항목값
JavaScript 프로퍼티tooltipEnabled
HTML attributetooltip-show
타입boolean
기본값true

tooltipFormat

a plain-text formatter of the default tooltip (tooltip.format wins).

항목값
JavaScript 프로퍼티tooltipFormat
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입(detail: CandlestickPointEventDetail) => string
기본값undefined

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

animated

초기 표시와 데이터 변경의 애니메이션 사용 여부입니다.

항목값
JavaScript 프로퍼티animated
HTML attributeanimate
타입boolean
기본값false

animationDuration

애니메이션 지속 시간(ms).

항목값
JavaScript 프로퍼티animationDuration
HTML attributeanimation-duration
타입number
기본값600

animationEasing

허용값: linear, ease-out, ease-in, ease-in-out. 기본값: 'ease-out'.

항목값
JavaScript 프로퍼티animationEasing
HTML attributeanimation-easing
타입CandlestickEasing
기본값'ease-out'
허용값linear, ease-out, ease-in, ease-in-out

animationType

허용값: initial, update. 기본값: undefined.

항목값
JavaScript 프로퍼티animationType
HTML attributeanimation-type
타입CandlestickAnimationType
기본값undefined
허용값initial, update

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

streamSource

A stream source of bars (§3.6); without one appendPoint creates an internal source.

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

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

streamMax

The bars the internal stream source tracks at most.

항목값
JavaScript 프로퍼티streamMax
HTML attributestream-max
타입number
기본값undefined

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

streamWindow

The newest N streamed bars the chart renders (the whole buffer when unset).

항목값
JavaScript 프로퍼티streamWindow
HTML attributestream-window
타입number
기본값undefined

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

engine

auto·standard·pro 렌더러 선택입니다. 엔진 선택은 차트 종류의 Pro 사용 권한과 별개입니다.

항목값
JavaScript 프로퍼티engine
HTML attributeengine
타입CandlestickEngineMode
기본값'auto'
허용값auto, standard, pro

unavailable

허용값: fallback, error. 기본값: 'fallback'.

항목값
JavaScript 프로퍼티unavailable
HTML attributeunavailable
타입CandlestickUnavailableBehaviour
기본값'fallback'
허용값fallback, error

Events

rendered

Every drawn frame; engine is the engine status (requested / effective / code / the governing license feature).

이벤트 이름: rendered. 대소문자를 구분합니다. payload는 CustomEvent<CandlestickRenderResult & { tier: CandlestickEngineTier; engine?: ChartEngineStatus }>의 detail에서 읽습니다.

javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // CandlestickRenderResult & { tier: CandlestickEngineTier; engine?: ChartEngineStatus }
});

pointClick

점 선택 이벤트입니다. CustomEvent.detail에서 선택한 데이터와 인덱스를 읽습니다.

이벤트 이름: pointClick. 대소문자를 구분합니다. payload는 CustomEvent<CandlestickPointEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('pointClick', event => {
  console.log(event.detail); // CandlestickPointEventDetail
});

pointHover

CustomEvent.detail 타입: CandlestickPointEventDetail | null. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: pointHover. 대소문자를 구분합니다. payload는 CustomEvent<CandlestickPointEventDetail | null>의 detail에서 읽습니다.

javascript
chart.addEventListener('pointHover', event => {
  console.log(event.detail); // CandlestickPointEventDetail | null
});

crosshairMove

CustomEvent.detail 타입: CartesianCrosshairEventDetail | null. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: crosshairMove. 대소문자를 구분합니다. payload는 CustomEvent<CartesianCrosshairEventDetail | null>의 detail에서 읽습니다.

javascript
chart.addEventListener('crosshairMove', event => {
  console.log(event.detail); // CartesianCrosshairEventDetail | null
});

pointContextMenu

CustomEvent.detail 타입: ChartPointContextMenuEventDetail<CandlestickPointEventDetail>. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: pointContextMenu. 대소문자를 구분합니다. payload는 CustomEvent<ChartPointContextMenuEventDetail<CandlestickPointEventDetail>>의 detail에서 읽습니다.

javascript
chart.addEventListener('pointContextMenu', event => {
  console.log(event.detail); // ChartPointContextMenuEventDetail<CandlestickPointEventDetail>
});

appended

CustomEvent.detail 타입: { count: number; replaced: number }. 이벤트 이름은 대소문자를 구분합니다.

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

javascript
chart.addEventListener('appended', event => {
  console.log(event.detail); // { count: number; replaced: number }
});

windowSlid

CustomEvent.detail 타입: { dropped: number }. 이벤트 이름은 대소문자를 구분합니다.

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

javascript
chart.addEventListener('windowSlid', event => {
  console.log(event.detail); // { dropped: number }
});

tooltipShow

the tooltip events of the shared contract.

이벤트 이름: tooltipShow. 대소문자를 구분합니다. payload는 CustomEvent<CartesianTooltipEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('tooltipShow', event => {
  console.log(event.detail); // CartesianTooltipEventDetail
});

tooltipHide

CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: tooltipHide. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.

javascript
chart.addEventListener('tooltipHide', event => {
  console.log(event.detail); // void
});

tooltipAction

CustomEvent.detail 타입: CartesianTooltipActionEventDetail. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: tooltipAction. 대소문자를 구분합니다. payload는 CustomEvent<CartesianTooltipActionEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('tooltipAction', event => {
  console.log(event.detail); // CartesianTooltipActionEventDetail
});

chartAnimationStart

CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: chartAnimationStart. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.

javascript
chart.addEventListener('chartAnimationStart', event => {
  console.log(event.detail); // void
});

chartAnimationEnd

CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: chartAnimationEnd. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.

javascript
chart.addEventListener('chartAnimationEnd', event => {
  console.log(event.detail); // void
});

chartAnimationInterrupted

CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: chartAnimationInterrupted. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.

javascript
chart.addEventListener('chartAnimationInterrupted', event => {
  console.log(event.detail); // void
});

zoomChange

Fired after every zoom change (drag / pan / wheel / pinch / keyboard / api / reset) with the new state.

이벤트 이름: zoomChange. 대소문자를 구분합니다. payload는 CustomEvent<CartesianZoomChangeEventDetail>의 detail에서 읽습니다.

javascript
chart.addEventListener('zoomChange', event => {
  console.log(event.detail); // CartesianZoomChangeEventDetail
});

Methods

getDataTable

Current normalized table, including the retained stream; independent of GPU availability.

typescript
getDataTable(): Promise<ChartDataTable>

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

redraw

현재 데이터와 옵션으로 차트를 다시 그립니다. 반환되는 Promise가 완료되면 렌더링 결과를 확인할 수 있습니다.

typescript
redraw(): Promise<CandlestickRenderResult>

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

getActiveTier

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

typescript
getActiveTier(): Promise<CandlestickEngineTier>

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

getUnavailableReason

Why the WebGPU renderer could not run (the fallback notice's reason); undefined when nothing fell back.

typescript
getUnavailableReason(): Promise<string | undefined>

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

setData

Replace the bar set.

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

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

appendPoint

스트림에 값 하나를 추가합니다. 메서드 인수 타입과 스트리밍 기능의 라이선스 조건을 확인하세요.

typescript
appendPoint(bar: CandlestickBarInput): Promise<void>
인수타입필수 여부
barCandlestickBarInput필수

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

appendBatch

스트림에 여러 값을 한 번에 추가합니다. 메서드 인수 타입과 스트리밍 기능의 라이선스 조건을 확인하세요.

typescript
appendBatch(bars: ReadonlyArray<CandlestickBarInput>): Promise<void>
인수타입필수 여부
barsReadonlyArray<CandlestickBarInput>필수

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

shift

Drop the oldest streamed bars (the data bars are not the stream).

typescript
shift(count: number): Promise<void>
인수타입필수 여부
countnumber필수

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

replace

Swap the streamed set (replace([]) clears it); the base values never leave. Without chart.streaming the dies upsert into the base like a batch (quietly: no appended, no binChanged, as a ring replace).

typescript
replace(bars: ReadonlyArray<CandlestickBarInput>): Promise<void>
인수타입필수 여부
barsReadonlyArray<CandlestickBarInput>필수

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

getStreamSource

The stream session's source (Chart Pro): like the stream methods it waits for a license still being confirmed.

typescript
getStreamSource(): Promise<CandlestickStreamSource | undefined>

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

setAnimation

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

typescript
setAnimation(options: { duration?: number; easing?: CandlestickEasing; enabled?: boolean; type?: CandlestickAnimationType }): Promise<void>
인수타입필수 여부
options{ duration?: number; easing?: CandlestickEasing; enabled?: boolean; type?: CandlestickAnimationType }필수

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

pauseAnimation

진행 중인 애니메이션을 일시 정지합니다.

typescript
pauseAnimation(): Promise<void>

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

resumeAnimation

일시 정지한 애니메이션을 다시 진행합니다.

typescript
resumeAnimation(): Promise<void>

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

replayAnimation

Replay the initial sweep from min → value(s). No-op when animation is off / reduced.

typescript
replayAnimation(): Promise<void>

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

hitTest

The bar under a host-local point (the nearest bar within half a pitch, anywhere inside the plot's height).

typescript
hitTest(cssX: number, cssY: number): Promise<CandlestickPointEventDetail | null>
인수타입필수 여부
cssXnumber필수
cssYnumber필수

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

getBar

The normalised bar at an index (null outside).

typescript
getBar(index: number): Promise<CandlestickBar | null>
인수타입필수 여부
indexnumber필수

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

getBarAt

The bar nearest to a time (null for an empty series).

typescript
getBarAt(time: number): Promise<(CandlestickBar & { index: number }) | null>
인수타입필수 여부
timenumber필수

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

getBarCount

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

typescript
getBarCount(): Promise<number>

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

getExtent

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

typescript
getExtent(): Promise<CandlestickExtent>

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

getDomain

The data domain the grid spans.

typescript
getDomain(): Promise<CandlestickDomain>

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

getVisibleRange

The bars the plot shows: the x-axis window, narrowed by the zoom when one is in place.

typescript
getVisibleRange(): Promise<CandlestickVisibleRange>

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

showTooltipAtIndex

open the tooltip on a bar by index (null when the tooltip is off or the bar is outside the visible window).

typescript
showTooltipAtIndex(index: number): Promise<CartesianTooltipEventDetail | null>
인수타입필수 여부
indexnumber필수

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

hideTooltip

현재 표시 중인 툴팁을 닫습니다.

typescript
hideTooltip(): Promise<void>

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

focusBarAt

move the keyboard focus ring to a bar (null outside the visible window); emits pointHover like the walk.

typescript
focusBarAt(index: number): Promise<CandlestickPointEventDetail | null>
인수타입필수 여부
indexnumber필수

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

getOverlays

the overlays: each settled spec with where its PRIMARY line exists and what is visible (the outputs and the band ride on the spec).

typescript
getOverlays(): Promise<CandlestickOverlayState[]>

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

getOverlayValues

the overlay values at a bar index: the primary output under the overlay id, the others under id.key (null through a warm-up).

typescript
getOverlayValues(index: number): Promise<Record<string, number | null>>
인수타입필수 여부
indexnumber필수

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

getPanes

the panes: the price pane, the volume pane when it exists, the separator, and why there is none.

typescript
getPanes(): Promise<CandlestickPaneRects>

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

getTimeScale

the time scale of the visible range: the kind, the slots, the spacing and the ordinal ticks.

typescript
getTimeScale(): Promise<CandlestickTimeScaleState>

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

zoomTo

Zoom to explicit windows: x / y as { min, max } or [min, max] (null clears that orientation; x in slots under the ordinal scale — bar i sits at i — or epoch ms under linear, y in price); xAxis / yAxis name the axis by id or slot index (default: the primary axis).

typescript
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>
인수타입필수 여부
requestCartesianZoomRequest필수

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

zoomBy

Scale the current windows by factor (< 1 zooms in) around anchorFraction (0..1, default centre).

typescript
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>
인수타입필수 여부
factornumber필수
anchorFractionnumber선택

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

panBy

Slide the zoomed windows by data units ({ x?, y? } — x in slots or ms, y in price); a no-op at the full extent.

typescript
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>
인수타입필수 여부
delta{ x?: number; y?: number }필수

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

resetZoom

확대·이동한 범위를 초기 데이터 범위로 되돌립니다.

typescript
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>

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

getZoom

현재 확대 범위를 읽습니다. 반환 타입의 null 허용 여부와 축별 범위를 확인하세요.

typescript
getZoom(): Promise<CartesianZoomState | null>

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

getZoomExtent

The full extent (and key) of the primary — or the named — master axes (x: the visible slot range −0.5 … n − 0.5 under ordinal, the ms window under linear; y: the fitted price domain).

typescript
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>
인수타입필수 여부
requestCartesianZoomExtentRequest선택

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

getEngineStatus

Requested engine vs what runs, and why (CHART-ADD-08): the decision for the current inputs, read without side effects (ProChartLicense.engineStatus); a renderer that failed at run time reports engine-unsupported.

typescript
getEngineStatus(): Promise<ChartEngineStatus>

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