sy-gauge-chart

Gauge

한 지표의 현재 상태를 정해진 범위에서 읽습니다.

sy-gauge-chart

목표 달성률·용량·속도처럼 범위가 명확한 값에 사용하세요.

시간에 따른 추세는 별도 차트로 보여주세요. 범위를 넘는 값과 경계의 의미를 설명하세요.

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

입력데이터 설명
value현재 측정값입니다.
min측정 범위의 시작입니다.
max측정 범위의 끝입니다.
variantsolid·dial 등 게이지 표현입니다.

전체 적용 예제

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

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

  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-gauge-chart",
      "props": {
        "engine": "standard",
        "value": 80,
        "min": 0,
        "max": 200,
        "variant": "dial",
        "unit": "km/h",
        "bandThickness": 14,
        "plotBands": [
          {
            "from": 0,
            "to": 120,
            "color": "#16a34a"
          },
          {
            "from": 120,
            "to": 160,
            "color": "#f59e0b"
          },
          {
            "from": 160,
            "to": 200,
            "color": "#dc2626"
          }
        ],
        "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', 'gauge 예제 차트');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('valueChange', event.detail);
  };
  chart.addEventListener('valueChange', 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('valueChange', onEvent);
    container.replaceChildren();
  }
</script>

Properties

value

현재 측정값입니다.

항목값
JavaScript 프로퍼티value
HTML attributevalue
타입number
기본값0

min

측정 범위의 시작입니다.

항목값
JavaScript 프로퍼티min
HTML attributemin
타입number
기본값0

max

측정 범위의 끝입니다.

항목값
JavaScript 프로퍼티max
HTML attributemax
타입number
기본값100

needles

Multi-needle override (dial variant). When set + non-empty, drives the dial instead of value.

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

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

width

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

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

height

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

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

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

variant

solid·dial 등 게이지 표현입니다.

항목값
JavaScript 프로퍼티variant
HTML attributevariant
타입GaugeChartVariant
기본값'dial'
허용값solid, dial, activity, vuMeter, speedometer, clock

startAngle

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

항목값
JavaScript 프로퍼티startAngle
HTML attributestart-angle
타입number
기본값-150

endAngle

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

항목값
JavaScript 프로퍼티endAngle
HTML attributeend-angle
타입number
기본값150

size

JavaScript 프로퍼티로 전달합니다. 타입: number | string.

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

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

centerX

JavaScript 프로퍼티로 전달합니다. 타입: number | string.

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

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

centerY

JavaScript 프로퍼티로 전달합니다. 타입: number | string.

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

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

innerRadius

Solid-variant inner radius. Number = px; '%' = fraction of outerRadius.

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

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

thickness

Band / solid-ring thickness in px. Wins over innerRadius for the solid variant.

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

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

rings

Activity-variant rings (property-only). Each ring has its OWN value/max (Move 500 kcal, Exercise 30 min…). Absent → the variant falls back to needles (shared chart max) or the scalar value (one ring).

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

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

time

Clock-variant time. 'now'/unset keeps the face ticking live (1 s interval, cleaned up on disconnect); 'HH:MM'/'HH:MM:SS' freezes it.

항목값
JavaScript 프로퍼티time
HTML attributetime
타입string
기본값undefined

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

showSeconds

Clock-variant second hand (thin, red).

항목값
JavaScript 프로퍼티showSeconds
HTML attributeshow-seconds
타입boolean
기본값true

color

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

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

colors

Needle palette (multi-needle). Per-needle color always wins.

항목값
JavaScript 프로퍼티colors
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입ReadonlyArray<string>
기본값undefined

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

stops

Solid-variant colour stops (0..1 along min..max). Progress colour interpolates between them.

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

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

needleShape

허용값: needle, arrow, line, wedge. 기본값: 'needle'.

항목값
JavaScript 프로퍼티needleShape
HTML attributeneedle-shape
타입GaugeNeedleShape
기본값'needle'
허용값needle, arrow, line, wedge

needleLength

JavaScript 프로퍼티로 전달합니다. 타입: number | string.

항목값
JavaScript 프로퍼티needleLength
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입number | string
기본값'88%'

needleRearLength

JavaScript 프로퍼티로 전달합니다. 타입: number | string.

항목값
JavaScript 프로퍼티needleRearLength
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입number | string
기본값'14%'

needleWidth

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

항목값
JavaScript 프로퍼티needleWidth
HTML attributeneedle-width
타입number
기본값8

pivotRadius

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

항목값
JavaScript 프로퍼티pivotRadius
HTML attributepivot-radius
타입number
기본값7

pivotColor

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

항목값
JavaScript 프로퍼티pivotColor
HTML attributepivot-color
타입string
기본값'#1f2937'

plotBands

Coloured zones — an array, or 'auto' to split the axis by % of max.

항목값
JavaScript 프로퍼티plotBands
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입GaugePlotBand[] | 'auto'
기본값undefined
타입에 포함된 리터럴auto

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

bandThickness

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

항목값
JavaScript 프로퍼티bandThickness
HTML attributeband-thickness
타입number
기본값14

bandTrackColor

The 'empty' track behind plot bands — the un-zoned part of the axis.

항목값
JavaScript 프로퍼티bandTrackColor
HTML attributeband-track-color
타입string
기본값'#eef2f7'

rounded

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

항목값
JavaScript 프로퍼티rounded
HTML attributerounded
타입boolean
기본값true

trackColor

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

항목값
JavaScript 프로퍼티trackColor
HTML attributetrack-color
타입string
기본값'#e5e7eb'

showTicks

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

항목값
JavaScript 프로퍼티showTicks
HTML attributeshow-ticks
타입boolean
기본값true

tickInterval

허용값: auto. 기본값: 'auto'.

항목값
JavaScript 프로퍼티tickInterval
HTML attribute객체·배열·콜백은 JavaScript 프로퍼티로 전달
타입number | 'auto'
기본값'auto'
타입에 포함된 리터럴auto

minorTicks

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

항목값
JavaScript 프로퍼티minorTicks
HTML attributeminor-ticks
타입number
기본값4

tickLength

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

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

minorTickLength

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

항목값
JavaScript 프로퍼티minorTickLength
HTML attributeminor-tick-length
타입number
기본값6

tickWidth

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

항목값
JavaScript 프로퍼티tickWidth
HTML attributetick-width
타입number
기본값2

minorTickWidth

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

항목값
JavaScript 프로퍼티minorTickWidth
HTML attributeminor-tick-width
타입number
기본값1

tickColor

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

항목값
JavaScript 프로퍼티tickColor
HTML attributetick-color
타입string
기본값'#94a3b8'

showTickLabels

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

항목값
JavaScript 프로퍼티showTickLabels
HTML attributeshow-tick-labels
타입boolean
기본값true

tickLabelDistance

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

항목값
JavaScript 프로퍼티tickLabelDistance
HTML attributetick-label-distance
타입number
기본값7

tickLabelColor

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

항목값
JavaScript 프로퍼티tickLabelColor
HTML attributetick-label-color
타입string
기본값'#64748b'

tickLabelFontSize

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

항목값
JavaScript 프로퍼티tickLabelFontSize
HTML attributetick-label-font-size
타입number
기본값11

tickLabelFormat

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

항목값
JavaScript 프로퍼티tickLabelFormat
HTML attributetick-label-format
타입string
기본값undefined

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

showValue

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

항목값
JavaScript 프로퍼티showValue
HTML attributeshow-value
타입boolean
기본값true

valueDisplay

Print the raw value or its percent of the axis (gauges use both).

항목값
JavaScript 프로퍼티valueDisplay
HTML attributevalue-display
타입GaugeValueDisplay
기본값'value'
허용값percent, value

valueFormat

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

항목값
JavaScript 프로퍼티valueFormat
HTML attributevalue-format
타입string
기본값undefined

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

valueColor

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

항목값
JavaScript 프로퍼티valueColor
HTML attributevalue-color
타입string
기본값'#0f172a'

valueFontSize

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

항목값
JavaScript 프로퍼티valueFontSize
HTML attributevalue-font-size
타입number
기본값26

unit

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

항목값
JavaScript 프로퍼티unit
HTML attributeunit
타입string
기본값undefined

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

centerText

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

항목값
JavaScript 프로퍼티centerText
HTML attributecenter-text
타입string
기본값undefined

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

centerSubtext

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

항목값
JavaScript 프로퍼티centerSubtext
HTML attributecenter-subtext
타입string
기본값undefined

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

chartTitle

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

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

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

chartSubtitle

차트 내부 부제목입니다.

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

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

tooltipShow

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

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

tooltipFormat

JavaScript 프로퍼티로 전달합니다. 타입: (detail: GaugeChartPointerEventDetail) => string.

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

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

enableMouseTracking

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

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

tooltip

Rich tooltip configuration object — the dial-flavoured counterpart to the cartesian / pie .tooltip API. Enables trigger (hover/click/hover-click), openMode (single/multiple pinned), connector, draggable, interactive action buttons, custom format/html/style/className/side and fixed sizing. When set it takes precedence over the flat tooltip-show / tooltipFormat props (which stay for back-compat). Property-only — assign the object, not an attribute.

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

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

legend

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

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

legendPosition

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

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

legendItems

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

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

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

animated

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

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

animationDuration

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

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

animationEasing

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

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

animationType

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

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

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

analogDamping

analog damping (1..n) for long sweeps — LOWER = bigger overshoot + more wobbles, higher = calmer. Short updates are auto-damped calmer.

항목값
JavaScript 프로퍼티analogDamping
HTML attributeanalog-damping
타입number
기본값5

analogFrequency

analog swing frequency (1..n) — higher = more wobbles packed into the settle.

항목값
JavaScript 프로퍼티analogFrequency
HTML attributeanalog-frequency
타입number
기본값18

analogOvershootAngle

How far past the scale ends the needle may overshoot, in degrees (visible at min/max).

항목값
JavaScript 프로퍼티analogOvershootAngle
HTML attributeanalog-overshoot-angle
타입number
기본값14

streamSource

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

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

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

streamWindow

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

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

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

streamMax

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

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

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

engine

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

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

proThreshold

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

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

unavailable

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

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

Events

rendered

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

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

javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // GaugeChartRenderResult & { tier: GaugeChartEngineTier }
});

gaugeClick

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

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

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

gaugeHover

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

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

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

pointContextMenu

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

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

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

valueChange

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

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

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

legendItemClick

CustomEvent.detail 타입: { index: number; needleId: string; label: string; disabled: boolean }. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: legendItemClick. 대소문자를 구분합니다. payload는 CustomEvent<{ index: number; needleId: string; label: string; disabled: boolean }>의 detail에서 읽습니다.

javascript
chart.addEventListener('legendItemClick', event => {
  console.log(event.detail); // { index: number; needleId: string; label: string; disabled: boolean }
});

needleToggled

CustomEvent.detail 타입: { index: number; needleId: string; disabled: boolean }. 이벤트 이름은 대소문자를 구분합니다.

이벤트 이름: needleToggled. 대소문자를 구분합니다. payload는 CustomEvent<{ index: number; needleId: string; disabled: boolean }>의 detail에서 읽습니다.

javascript
chart.addEventListener('needleToggled', event => {
  console.log(event.detail); // { index: number; needleId: string; disabled: boolean }
});

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

tooltipShow

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

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

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

tooltipHide

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

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

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

tooltipAction

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

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

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

Methods

redraw

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

typescript
redraw(): Promise<GaugeChartRenderResult>

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

getActiveTier

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

typescript
getActiveTier(): Promise<GaugeChartEngineTier>

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

getValue

The dB value of a cell (null when empty or outside the grid).

typescript
getValue(): Promise<number>

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

setValue

Set the primary value (animates when animated).

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

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

addNeedle

Gauge-only — add a needle (dial variant).

typescript
addNeedle(needle: GaugeNeedleSpec, opts?: { insertAt?: number }): Promise<number>
인수타입필수 여부
needleGaugeNeedleSpec필수
opts{ insertAt?: number }선택

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

removeNeedle

Gauge-only — remove a needle by id or index.

typescript
removeNeedle(idOrIndex: string | number): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수

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

setRings

Replace the activity ring set (animates per ring when animated).

typescript
setRings(rings: GaugeActivityRingSpec[]): Promise<void>
인수타입필수 여부
ringsGaugeActivityRingSpec[]필수

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

setRingValue

Update ONE activity ring's value by id, name, or index (animates when animated).

typescript
setRingValue(idOrIndex: string | number, value: number): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수
valuenumber필수

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

updateNeedle

Gauge-only — patch a needle.

typescript
updateNeedle(idOrIndex: string | number, patch: Partial<GaugeNeedleSpec>): Promise<boolean>
인수타입필수 여부
idOrIndexstring | number필수
patchPartial<GaugeNeedleSpec>필수

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

appendPoint

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

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

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

appendBatch

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

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

반환 타입: 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>): Promise<void>
인수타입필수 여부
valuesReadonlyArray<number>필수

반환 타입: 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<GaugeChartStreamSource | undefined>

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

setAnimation

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

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

반환 타입: 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 box under a host-local CSS point (the nearest slot, within half a pitch), or null.

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

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

showTooltip

Open the value tooltip programmatically at the primary value (needle 0, or the scalar value). Anchors on the dial along the value's angle.

typescript
showTooltip(): Promise<GaugeChartPointerEventDetail | null>

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

showTooltipAtValue

Gauge analogue of pie's showTooltipAtSlice — compute the pointer detail at value's angle on the dial and open the tooltip there.

typescript
showTooltipAtValue(value: number): Promise<GaugeChartPointerEventDetail | null>
인수타입필수 여부
valuenumber필수

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

hideTooltip

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

typescript
hideTooltip(): Promise<void>

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

getEngineStatus

Requested engine vs what runs, and why (CHART-ADD-08): always Standard (this type has no WebGPU renderer); read without side effects, never consults the license.

typescript
getEngineStatus(): Promise<ChartEngineStatus>

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