sy-line-chart

Line

시간에 따른 변화를 선으로 읽습니다.

sy-line-chart

날짜나 순서가 있는 지표의 추세와 시리즈 간 차이를 비교하세요.

연속성이 없는 항목의 크기 비교에는 Column·Bar가 더 적합합니다. 보간 곡선과 실제 측정점을 구분하세요.

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

입력데이터 설명
series이름·색·values를 가진 시리즈 배열입니다. 같은 인덱스가 같은 시점을 뜻합니다.
xAxiscategory 축의 categories를 values 순서와 맞춥니다.
yAxis서로 비교할 값의 단위와 범위를 통일합니다.

전체 적용 예제

html
<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-line-chart.js';
  define0();

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-line-chart",
      "props": {
        "engine": "standard",
        "series": [
          {
            "name": "Organic",
            "color": "#8263d9",
            "values": [24, 29, 27, 38, 43, 40, 52, 58, 53, 68, 76, 84]
          },
          {
            "name": "Direct",
            "color": "#239c91",
            "values": [15, 19, 17, 24, 22, 29, 32, 30, 39, 42, 40, 51]
          },
          {
            "name": "Referral",
            "color": "#e99954",
            "values": [8, 11, 9, 15, 13, 19, 17, 23, 22, 28, 25, 33]
          }
        ],
        "xAxis": {
          "kind": "category",
          "categories": ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
        },
        "yAxis": {
          "kind": "linear",
          "min": 0
        },
        "smooth": "none",
        "thickness": 2.5,
        "marker": "circle",
        "markerSize": 4,
        "legend": true,
        "tooltip": {
          "show": true,
          "mode": "shared"
        },
        "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', 'line 예제 차트');
    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

series

이름·색·values를 가진 시리즈 배열입니다. 같은 인덱스가 같은 시점을 뜻합니다.

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

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

activeSeriesIndex

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

항목값
JavaScript 프로퍼티activeSeriesIndex
HTML attributeactive-series-index
타입number
기본값undefined

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

seriesState

JavaScript 프로퍼티로 전달합니다. 타입: LineChartSeriesStateOptions.

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

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

values

단일 시리즈의 값을 전달합니다. Line의 숫자 배열, Scatter의 좌표 배열 등 선택한 차트 종류에 맞는 타입을 사용합니다. 배열과 객체는 JavaScript 프로퍼티로 할당하세요.

항목값
JavaScript 프로퍼티values
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입LineChartValues
기본값new Float32Array(0)

width

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

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

height

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

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

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

color

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

항목값
JavaScript 프로퍼티color
HTML attributecolor
타입string
기본값'#2563eb'

thickness

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

항목값
JavaScript 프로퍼티thickness
HTML attributethickness
타입number
기본값1

marker

허용값: none, circle, square, triangle, cross, diamond, star. 기본값: 'none'.

항목값
JavaScript 프로퍼티marker
HTML attributemarker
타입LineChartMarker
기본값'none'
허용값none, circle, square, triangle, cross, diamond, star

markerSize

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

항목값
JavaScript 프로퍼티markerSize
HTML attributemarker-size
타입number
기본값4

markerFilter

JavaScript 프로퍼티로 전달합니다. 타입: LineChartMarkerFilter.

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

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

markerClickable

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

항목값
JavaScript 프로퍼티markerClickable
HTML attributemarker-clickable
타입boolean
기본값true

markerActiveTrigger

허용값: hover, click, custom. 기본값: 'hover'.

항목값
JavaScript 프로퍼티markerActiveTrigger
HTML attributemarker-active-trigger
타입LineChartMarkerActiveTrigger
기본값'hover'
허용값hover, click, custom

seriesActiveTrigger

허용값: hover, click, custom. 기본값: undefined.

항목값
JavaScript 프로퍼티seriesActiveTrigger
HTML attributeseries-active-trigger
타입LineChartMarkerActiveTrigger
기본값undefined
허용값hover, click, custom

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

lineDash

JavaScript 프로퍼티로 전달합니다. 타입: number[].

항목값
JavaScript 프로퍼티lineDash
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입number[]
기본값[]

connectNulls

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

항목값
JavaScript 프로퍼티connectNulls
HTML attributeconnect-nulls
타입boolean
기본값false

smooth

허용값: none, monotone, cardinal. 기본값: 'none'.

항목값
JavaScript 프로퍼티smooth
HTML attributesmooth
타입LineChartSmooth
기본값'none'
허용값none, monotone, cardinal

smoothTension

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

항목값
JavaScript 프로퍼티smoothTension
HTML attributesmooth-tension
타입number
기본값0.5

step

허용값: none, left, right, center. 기본값: 'none'.

항목값
JavaScript 프로퍼티step
HTML attributestep
타입LineChartStep
기본값'none'
허용값none, left, right, center

baseline

Reference value on the y-axis. Lines do not grow from the baseline, but the baseline remains visible as a value-axis tick and marker so threshold comparisons stay explicit across all cartesian chart families.

항목값
JavaScript 프로퍼티baseline
HTML attributebaseline
타입number
기본값0

engine

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

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

proThreshold

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

항목값
JavaScript 프로퍼티proThreshold
HTML attributepro-threshold
타입number
기본값100_000

unavailable

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

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

streamSource

실시간 데이터를 전달하는 스트림 소스입니다. 해당 타입의 계약을 확인하세요.

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

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

streamWindow

화면에 유지할 스트리밍 데이터 구간입니다.

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

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

streamMax

보관할 스트리밍 데이터의 최대 수입니다.

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

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

frameBudget

milliseconds a drawn frame may take before the next scheduled frame is skipped (its appends land in the frame after). Default 16; 0 disables skipping (frames are still measured).

항목값
JavaScript 프로퍼티frameBudget
HTML attributeframe-budget
타입number
기본값undefined

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

streamWindowMs

an absolute time window: only points stamped within the last N ms are visible; it slides as points expire (a timed re-arm, not a frame loop) and overrides stream-window while set.

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

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

streamTimestamps

(carry-over A1) — whether the internal ring stamps every point (a Float64 per slot: 8 MB at a 1M capacity). on (default) keeps the stamps an absolute stream-window-ms resolves through; off is the opt-out for charts that only ever use a count window (an absolute window then has nothing to resolve and falls back to stream-window).

항목값
JavaScript 프로퍼티streamTimestamps
HTML attributestream-timestamps
타입'on' | 'off'
기본값undefined
허용값off, on

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

animated

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

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

animationDuration

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

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

animationEasing

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

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

animationType

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

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

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

legend

시리즈 또는 항목의 범례 표시 여부입니다.

항목값
JavaScript 프로퍼티legend
HTML attributelegend
타입boolean
기본값false

legendPosition

범례를 배치할 위치입니다.

항목값
JavaScript 프로퍼티legendPosition
HTML attributelegend-position
타입LineChartLegendPosition
기본값'bottom'
허용값top, bottom, left, right, float

legendItems

JavaScript 프로퍼티로 전달합니다. 타입: LegendItem[].

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

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

seriesName

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

항목값
JavaScript 프로퍼티seriesName
HTML attributeseries-name
타입string
기본값undefined

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

legendFloatAlign

허용값: start, center, end. 기본값: 'end'.

항목값
JavaScript 프로퍼티legendFloatAlign
HTML attributelegend-float-align
타입'start' | 'center' | 'end'
기본값'end'
허용값start, center, end

legendFloatVerticalAlign

허용값: top, bottom, middle. 기본값: 'top'.

항목값
JavaScript 프로퍼티legendFloatVerticalAlign
HTML attributelegend-float-vertical-align
타입'top' | 'middle' | 'bottom'
기본값'top'
허용값top, bottom, middle

legendDraggable

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

항목값
JavaScript 프로퍼티legendDraggable
HTML attributelegend-draggable
타입boolean
기본값false

xAxis

category 축의 categories를 values 순서와 맞춥니다.

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

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

yAxis

서로 비교할 값의 단위와 범위를 통일합니다.

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

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

chartTitle

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

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

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

chartSubtitle

차트 내부 부제목입니다.

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

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

tooltip

포인터에 따라 표시할 값, 위치, 내용의 툴팁 설정입니다.

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

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

crosshair

JavaScript 프로퍼티로 전달합니다. 타입: CartesianCrosshairInput.

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

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

gridLines

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

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

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

zoom

zoom: 'x' | 'y' | 'xy' | true (x) enable the drag rectangle + keyboard (+ / - / Escape) on the primary axes; an object refines mode / drag / keyboard / minRangePx / resetButton. Off by default. zoomTo / zoomBy / resetZoom work regardless of the gesture switches.

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

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

brush

brush selection: 'rect' | true | { type, mode, modifier, minSizePx, keyboard, clearOnClick }; off by default.

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

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

drawings

the drawing document: a list of drawings, a serialized envelope, or a JSON string of either (replaces the document; the history restarts).

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

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

drawingMode

the pointer disposition: 'none' (default), 'draw' (the plain drag places drawingTool; precedence drawing > brush > zoom > pan), 'select' ().

항목값
JavaScript 프로퍼티drawingMode
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입DrawingModeInput
기본값undefined
타입에 포함된 리터럴none, off, true, false, draw, select

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

drawingTool

the tool drawingMode="draw" places (a registered tool name; default 'segment').

항목값
JavaScript 프로퍼티drawingTool
HTML attributedrawing-tool
타입string
기본값undefined

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

drawingSpace

the space new drawings are anchored in: 'data' (default — the primary axes) or 'pixel' (offsets from the plot's top-left; they stay put under zoom, pan and data changes).

항목값
JavaScript 프로퍼티drawingSpace
HTML attributedrawing-space
타입DrawingSpace
기본값undefined
허용값data, pixel

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

visualMap

a visual map binding (a sy-visual-map snapshot + the data dimension): every mark is coloured through it.

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

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

Events

rendered

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

이벤트 이름: rendered. 대소문자를 구분합니다. payload는 CustomEvent<LineChartRenderResult & { tier: LineChartEngineTier; budget?: LineChartFrameBudgetInfo; stream?: LineChartStreamFrameInfo }>의 detail에서 읽습니다.

javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // LineChartRenderResult & { tier: LineChartEngineTier; budget?: LineChartFrameBudgetInfo; stream?: LineChartStreamFrameInfo }
});

frameBudgetReport

a scheduled frame was skipped (the previous one overran the budget, or the GPU is behind), or a drawn frame overran.

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

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

appended

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

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

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

windowSlid

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

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

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

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
});

pointHover

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

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

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

pointClick

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

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

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

pointContextMenu

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

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

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

seriesClick

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

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

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

seriesOutsideClick

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

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

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

legendItemClick

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

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

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

seriesToggled

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

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

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

crosshairMove

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

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

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

tooltipShow

내장 툴팁 표시 여부입니다.

이벤트 이름: 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
});

zoomChange

fired after every zoom change (drag / keyboard / api / reset) with the new state.

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

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

brushChange

the brush areas / selection changed (drag, api, clear, keyboard).

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

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

brushStart

a brush drag opened up (once per gesture).

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

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

brushMove

a live frame of the drag (throttled; the selection only with liveSelection).

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

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

brushEnd

the drag released (after brushChange), or was cancelled.

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

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

drawingsChange

the drawing document changed (a placement, the api, undo / redo, clear, the prop).

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

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

drawingSelectionChange

the drawing selection changed (a click, a marquee, the api, Escape, a document change pruning it).

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

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

Methods

appendPoint

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

typescript
appendPoint(value: number): Promise<void>
인수타입필수 여부
valuenumber필수

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

appendBatch

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

typescript
appendBatch(values: ReadonlyArray<number> | Float32Array): Promise<void>
인수타입필수 여부
valuesReadonlyArray<number> | Float32Array필수

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

shift

Drop the oldest streamed categories (the data boxes 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(values: ReadonlyArray<number> | Float32Array): Promise<void>
인수타입필수 여부
valuesReadonlyArray<number> | Float32Array필수

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

getStreamSource

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

typescript
getStreamSource(): Promise<LineChartStreamSource | undefined>

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

getEngineStatus

The requested engine, the engine that draws and why . A Chart Pro license decision names chart.webgpu and its state; renderer causes (not in this build, no WebGPU, a failed GPU) stay apart.

typescript
getEngineStatus(): Promise<ChartEngineStatus>

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

setAnimation

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

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

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

pauseAnimation

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

typescript
pauseAnimation(): Promise<void>

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

resumeAnimation

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

typescript
resumeAnimation(): Promise<void>

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

showTooltipAtPoint

Open the tooltip for a dot programmatically. pointIndex is the category (row) index; the optional seriesIndex selects a group within that row (defaults to the first visible group's dot in the row). Returns the emitted tooltip detail, or null when no dot resolves / the tooltip is disabled.

typescript
showTooltipAtPoint(pointIndex: number): Promise<CartesianTooltipEventDetail | null>
인수타입필수 여부
pointIndexnumber필수

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

hideTooltip

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

typescript
hideTooltip(): Promise<void>

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

zoomTo

zoom to explicit windows: x / y as { min, max } or [min, max] (null clears that orientation); 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? }); 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 (null before the first layout).

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

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

showCrosshairAt

show the crosshair at a data position (a linked chart's cursor) without emitting crosshairMove; false when it falls outside the plot.

typescript
showCrosshairAt(request: CartesianCrosshairShowRequest): Promise<boolean>
인수타입필수 여부
requestCartesianCrosshairShowRequest필수

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

hideCrosshair

hide the crosshair shown by showCrosshairAt (or the pointer's).

typescript
hideCrosshair(): Promise<void>

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

getDrawings

the drawings of the document (data-space anchors).

typescript
getDrawings(): Promise<ChartDrawing[]>

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

setDrawings

replace the document from script (null clears); the history keeps the previous document as an undo step.

typescript
setDrawings(drawings: ReadonlyArray<ChartDrawingInput> | null): Promise<DrawingsChangeEventDetail | null>
인수타입필수 여부
drawingsReadonlyArray<ChartDrawingInput> | null필수

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

addDrawing

add one drawing (an explicit id replaces); answers the resolved drawing, or null when the input was malformed.

typescript
addDrawing(drawing: ChartDrawingInput): Promise<ChartDrawing | null>
인수타입필수 여부
drawingChartDrawingInput필수

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

updateDrawing

merge a patch into one drawing (anchors, style, visible, locked, options, meta).

typescript
updateDrawing(id: string, patch: Partial<Omit<ChartDrawing, 'id'>>): Promise<ChartDrawing | null>
인수타입필수 여부
idstring필수
patchPartial<Omit<ChartDrawing, 'id'>>필수

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

removeDrawing

remove one drawing.

typescript
removeDrawing(id: string): Promise<boolean>
인수타입필수 여부
idstring필수

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

removeDrawings

remove several drawings in one undoable step (locked / unknown ids are skipped); the selection prunes itself.

typescript
removeDrawings(ids: ReadonlyArray<string>): Promise<DrawingsChangeEventDetail | null>
인수타입필수 여부
idsReadonlyArray<string>필수

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

setDrawingSpace

move a drawing to the other coordinate space at the current frame (its anchors convert, nothing moves on screen); one undoable step.

typescript
setDrawingSpace(id: string, space: DrawingSpace): Promise<ChartDrawing | null>
인수타입필수 여부
idstring필수
spaceDrawingSpace필수

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

clearDrawings

clear the document (undoable).

typescript
clearDrawings(): Promise<DrawingsChangeEventDetail | null>

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

undoDrawing

undo the last document change; null when there is nothing to undo.

typescript
undoDrawing(): Promise<DrawingsChangeEventDetail | null>

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

redoDrawing

redo the last undone change; null when there is nothing to redo.

typescript
redoDrawing(): Promise<DrawingsChangeEventDetail | null>

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

getDrawingLayer

the drawing overlay as a standalone SVG layer in host pixels (selection chrome and the placement preview stripped; null without drawings) — what the facade composes into the image export.

typescript
getDrawingLayer(): Promise<DrawingLayerSnapshot | null>

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

exportDrawings

the document as its versioned JSON envelope (feed it back through drawings or importDrawings).

typescript
exportDrawings(): Promise<string>

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

importDrawings

replace the document from an envelope / list / JSON string (undoable; malformed rows drop).

typescript
importDrawings(input: ChartDrawingsInput): Promise<DrawingsChangeEventDetail | null>
인수타입필수 여부
inputChartDrawingsInput필수

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

selectDrawings

select drawings from script (null / [] clears); unknown ids are dropped.

typescript
selectDrawings(ids: ReadonlyArray<string> | null): Promise<DrawingSelectionChangeEventDetail | null>
인수타입필수 여부
idsReadonlyArray<string> | null필수

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

getDrawingSelection

the selected drawing ids.

typescript
getDrawingSelection(): Promise<string[]>

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

setBrush

replace the brush areas from script (null clears); brushChange fires with source 'api'.

typescript
setBrush(areas: ReadonlyArray<CartesianBrushAreaInput> | null): Promise<CartesianBrushChangeEventDetail | null>
인수타입필수 여부
areasReadonlyArray<CartesianBrushAreaInput> | null필수

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

clearBrush

clear the brush areas (brushChange with source 'clear').

typescript
clearBrush(): Promise<CartesianBrushChangeEventDetail | null>

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

getBrush

the persisted brush areas (primary data space).

typescript
getBrush(): Promise<CartesianBrushArea[]>

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

getBrushSelection

the points inside the brush areas, against the current layout.

typescript
getBrushSelection(): Promise<CartesianBrushSelectedSeries[]>

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

setVisualMap

Bind (or clear) a visual map: every mark is coloured through it on the next paint.

typescript
setVisualMap(binding: VisualMapBinding | null): Promise<VisualMapBinding | null>
인수타입필수 여부
bindingVisualMapBinding | null필수

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

getVisualMap

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

typescript
getVisualMap(): Promise<VisualMapBinding | null>

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

getVisualExtent

The extent of a dimension over the visible points — what a bound sy-visual-map adopts as its domain.

typescript
getVisualExtent(request?: VisualMapExtentRequest): Promise<VisualMapExtent | null>
인수타입필수 여부
requestVisualMapExtentRequest선택

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

hitTestMarker

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

typescript
hitTestMarker(clientX: number, clientY: number): Promise<LineChartPointEventDetail | null>
인수타입필수 여부
clientXnumber필수
clientYnumber필수

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

hitTestMarkers

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

typescript
hitTestMarkers(clientX: number, clientY: number): Promise<LineChartPointEventDetail[]>
인수타입필수 여부
clientXnumber필수
clientYnumber필수

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

redraw

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

typescript
redraw(): Promise<LineChartRenderResult>

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

getActiveTier

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

typescript
getActiveTier(): Promise<LineChartEngineTier>

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

addSeries

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

typescript
addSeries(options: LineChartSeries, opts?: { redraw?: boolean; insertAt?: number }): Promise<number>
인수타입필수 여부
optionsLineChartSeries필수
opts{ redraw?: boolean; insertAt?: number }선택

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

removeSeries

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

typescript
removeSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수
opts{ redraw?: boolean }선택

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

updateSeries

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

typescript
updateSeries(idOrIndex: string | number, patch: Partial<LineChartSeries>, opts?: { redraw?: boolean }): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수
patchPartial<LineChartSeries>필수
opts{ redraw?: boolean }선택

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

setSeriesData

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

typescript
setSeriesData(idOrIndex: string | number, data: LineChartValues, opts?: { redraw?: boolean }): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수
dataLineChartValues필수
opts{ redraw?: boolean }선택

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

addPoint

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

typescript
addPoint(idOrIndex: string | number, point: number, opts?: { shift?: boolean; redraw?: boolean }): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수
pointnumber필수
opts{ shift?: boolean; redraw?: boolean }선택

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

showSeries

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

typescript
showSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수
opts{ redraw?: boolean }선택

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

hideSeries

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

typescript
hideSeries(idOrIndex: string | number, opts?: { redraw?: boolean }): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수
opts{ redraw?: boolean }선택

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