# Gauge

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

Canonical: https://chart.syidax.com/ko/docs/components/gauge/

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

## sy-gauge-chart

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

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

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

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

- [Components에서 실행하기](https://chart.syidax.com/charts/gauge) — 옵션 변경과 프레임워크별 코드
- [공통 설치와 연결](https://chart.syidax.com/ko/docs/getting-started.md)

<a id="example"></a>

## 전체 적용 예제

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

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced/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>
```

<a id="props"></a>

## Properties

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

### value

현재 측정값입니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `value` |
| HTML attribute | `value` |
| 타입 | `number` |
| 기본값 | `0` |

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

### min

측정 범위의 시작입니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `min` |
| HTML attribute | `min` |
| 타입 | `number` |
| 기본값 | `0` |

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

### max

측정 범위의 끝입니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `max` |
| HTML attribute | `max` |
| 타입 | `number` |
| 기본값 | `100` |

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

### needles

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

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

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

- [GaugeNeedleSpec](https://chart.syidax.com/ko/docs/types/GaugeNeedleSpec.md) — 타입 정의

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

### width

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `width` |
| HTML attribute | `width` |
| 타입 | `number` |
| 기본값 | `320` |

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

### height

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `height` |
| HTML attribute | `height` |
| 타입 | `number` |
| 기본값 | `280` |

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

### brandLogo

기본값은 Syidax 심볼과 워드마크입니다. Pro의 chart.branding 권한으로 none을 지정해 제거하거나 PNG·JPEG·WebP data URL로 교체할 수 있습니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `brandLogo` |
| HTML attribute | `brand-logo` |
| 타입 | `string` |
| 기본값 | `undefined` |

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

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

### brandPosition

로고를 고정할 코너입니다. Community·Pro 모두 네 코너 중 하나를 선택할 수 있으며 화면과 이미지 내보내기에 같은 위치를 사용합니다.

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `brandPosition` |
| HTML attribute | `brand-position` |
| 타입 | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` |
| 기본값 | `'bottom-right'` |
| 허용값 | `top-left`, `top-right`, `bottom-left`, `bottom-right` |

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

### variant

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

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

- [GaugeChartVariant](https://chart.syidax.com/ko/docs/types/GaugeChartVariant.md) — 타입 정의

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

### startAngle

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `startAngle` |
| HTML attribute | `start-angle` |
| 타입 | `number` |
| 기본값 | `-150` |

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

### endAngle

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `endAngle` |
| HTML attribute | `end-angle` |
| 타입 | `number` |
| 기본값 | `150` |

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

### size

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

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

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

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

### centerX

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

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

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

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

### centerY

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

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

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

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

### innerRadius

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

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

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

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

### thickness

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

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

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

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

### 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는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [GaugeActivityRingSpec](https://chart.syidax.com/ko/docs/types/GaugeActivityRingSpec.md) — 타입 정의

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

### 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 attribute | `time` |
| 타입 | `string` |
| 기본값 | `undefined` |

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

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

### showSeconds

Clock-variant second hand (thin, red).

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showSeconds` |
| HTML attribute | `show-seconds` |
| 타입 | `boolean` |
| 기본값 | `true` |

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

### color

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `color` |
| HTML attribute | `color` |
| 타입 | `string` |
| 기본값 | `'#2563eb'` |

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

### colors

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

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

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

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

### stops

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

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

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

- [GaugeColorStop](https://chart.syidax.com/ko/docs/types/GaugeColorStop.md) — 타입 정의

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

### needleShape

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

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

- [GaugeNeedleShape](https://chart.syidax.com/ko/docs/types/GaugeNeedleShape.md) — 타입 정의

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

### needleLength

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

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

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

### needleRearLength

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

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

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

### needleWidth

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `needleWidth` |
| HTML attribute | `needle-width` |
| 타입 | `number` |
| 기본값 | `8` |

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

### pivotRadius

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `pivotRadius` |
| HTML attribute | `pivot-radius` |
| 타입 | `number` |
| 기본값 | `7` |

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

### pivotColor

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

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

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

### plotBands

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

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

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

- [GaugePlotBand](https://chart.syidax.com/ko/docs/types/GaugePlotBand.md) — 타입 정의

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

### bandThickness

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `bandThickness` |
| HTML attribute | `band-thickness` |
| 타입 | `number` |
| 기본값 | `14` |

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

### bandTrackColor

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

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

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

### rounded

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `rounded` |
| HTML attribute | `rounded` |
| 타입 | `boolean` |
| 기본값 | `true` |

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

### trackColor

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

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

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

### showTicks

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showTicks` |
| HTML attribute | `show-ticks` |
| 타입 | `boolean` |
| 기본값 | `true` |

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

### tickInterval

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

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

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

### minorTicks

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `minorTicks` |
| HTML attribute | `minor-ticks` |
| 타입 | `number` |
| 기본값 | `4` |

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

### tickLength

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `tickLength` |
| HTML attribute | `tick-length` |
| 타입 | `number` |
| 기본값 | `9` |

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

### minorTickLength

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `minorTickLength` |
| HTML attribute | `minor-tick-length` |
| 타입 | `number` |
| 기본값 | `6` |

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

### tickWidth

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `tickWidth` |
| HTML attribute | `tick-width` |
| 타입 | `number` |
| 기본값 | `2` |

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

### minorTickWidth

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `minorTickWidth` |
| HTML attribute | `minor-tick-width` |
| 타입 | `number` |
| 기본값 | `1` |

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

### tickColor

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

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

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

### showTickLabels

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showTickLabels` |
| HTML attribute | `show-tick-labels` |
| 타입 | `boolean` |
| 기본값 | `true` |

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

### tickLabelDistance

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `tickLabelDistance` |
| HTML attribute | `tick-label-distance` |
| 타입 | `number` |
| 기본값 | `7` |

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

### tickLabelColor

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

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

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

### tickLabelFontSize

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

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

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

### tickLabelFormat

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `tickLabelFormat` |
| HTML attribute | `tick-label-format` |
| 타입 | `string` |
| 기본값 | `undefined` |

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

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

### showValue

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `showValue` |
| HTML attribute | `show-value` |
| 타입 | `boolean` |
| 기본값 | `true` |

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

### valueDisplay

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

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

- [GaugeValueDisplay](https://chart.syidax.com/ko/docs/types/GaugeValueDisplay.md) — 타입 정의

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

### valueFormat

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `valueFormat` |
| HTML attribute | `value-format` |
| 타입 | `string` |
| 기본값 | `undefined` |

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

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

### valueColor

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

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

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

### valueFontSize

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `valueFontSize` |
| HTML attribute | `value-font-size` |
| 타입 | `number` |
| 기본값 | `26` |

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

### unit

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

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

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

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

### centerText

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `centerText` |
| HTML attribute | `center-text` |
| 타입 | `string` |
| 기본값 | `undefined` |

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

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

### centerSubtext

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `centerSubtext` |
| HTML attribute | `center-subtext` |
| 타입 | `string` |
| 기본값 | `undefined` |

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

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

### chartTitle

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

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

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

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

### chartSubtitle

차트 내부 부제목입니다.

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

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

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

### tooltipShow

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `tooltipShow` |
| HTML attribute | `tooltip-show` |
| 타입 | `boolean` |
| 기본값 | `true` |

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

### tooltipFormat

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

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

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

- [GaugeChartPointerEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartPointerEventDetail.md) — 타입 정의

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

### enableMouseTracking

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `enableMouseTracking` |
| HTML attribute | `enable-mouse-tracking` |
| 타입 | `boolean` |
| 기본값 | `true` |

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

### 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는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.

- [GaugeChartTooltipInput](https://chart.syidax.com/ko/docs/types/GaugeChartTooltipInput.md) — 타입 정의

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

### legend

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `legend` |
| HTML attribute | `legend` |
| 타입 | `boolean` |
| 기본값 | `false` |

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

### legendPosition

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

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

- [GaugeChartLegendPosition](https://chart.syidax.com/ko/docs/types/GaugeChartLegendPosition.md) — 타입 정의

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

### legendItems

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

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

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

- [LegendItem](https://chart.syidax.com/ko/docs/types/LegendItem.md) — 타입 정의

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

### animated

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `animated` |
| HTML attribute | `animate` |
| 타입 | `boolean` |
| 기본값 | `false` |

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

### animationDuration

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `animationDuration` |
| HTML attribute | `animation-duration` |
| 타입 | `number` |
| 기본값 | `900` |

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

### animationEasing

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

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

- [GaugeChartEasing](https://chart.syidax.com/ko/docs/types/GaugeChartEasing.md) — 타입 정의

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

### animationType

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

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

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

- [GaugeChartAnimationType](https://chart.syidax.com/ko/docs/types/GaugeChartAnimationType.md) — 타입 정의

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

### analogDamping

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `analogDamping` |
| HTML attribute | `analog-damping` |
| 타입 | `number` |
| 기본값 | `5` |

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

### analogFrequency

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `analogFrequency` |
| HTML attribute | `analog-frequency` |
| 타입 | `number` |
| 기본값 | `18` |

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

### analogOvershootAngle

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `analogOvershootAngle` |
| HTML attribute | `analog-overshoot-angle` |
| 타입 | `number` |
| 기본값 | `14` |

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

### streamSource

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

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

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

- [GaugeChartStreamSource](https://chart.syidax.com/ko/docs/types/GaugeChartStreamSource.md) — 타입 정의

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

### streamWindow

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `streamWindow` |
| HTML attribute | `stream-window` |
| 타입 | `number` |
| 기본값 | `undefined` |

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

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

### streamMax

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `streamMax` |
| HTML attribute | `stream-max` |
| 타입 | `number` |
| 기본값 | `undefined` |

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

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

### engine

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

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

- [GaugeChartEngineMode](https://chart.syidax.com/ko/docs/types/GaugeChartEngineMode.md) — 타입 정의

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

### proThreshold

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

| 항목 | 값 |
| --- | --- |
| JavaScript 프로퍼티 | `proThreshold` |
| HTML attribute | `pro-threshold` |
| 타입 | `number` |
| 기본값 | `50_000` |

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

### unavailable

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

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

- [GaugeChartUnavailableBehaviour](https://chart.syidax.com/ko/docs/types/GaugeChartUnavailableBehaviour.md) — 타입 정의

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

## Events

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

### rendered

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

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

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

- [GaugeChartRenderResult](https://chart.syidax.com/ko/docs/types/GaugeChartRenderResult.md) — 타입 정의
- [GaugeChartEngineTier](https://chart.syidax.com/ko/docs/types/GaugeChartEngineTier.md) — 타입 정의

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

### gaugeClick

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

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

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

- [GaugeChartPointerEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartPointerEventDetail.md) — 타입 정의

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

### gaugeHover

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

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

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

- [GaugeChartPointerEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartPointerEventDetail.md) — 타입 정의

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

### pointContextMenu

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

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

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

- [ChartPointContextMenuEventDetail](https://chart.syidax.com/ko/docs/types/ChartPointContextMenuEventDetail.md) — 타입 정의
- [GaugeChartPointerEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartPointerEventDetail.md) — 타입 정의

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

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

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

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

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

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

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

### appended

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

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

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

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

### windowSlid

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

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

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

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

### chartAnimationStart

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

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

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

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

### chartAnimationEnd

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

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

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

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

### chartAnimationInterrupted

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

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

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

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

### tooltipShow

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

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

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

- [GaugeChartTooltipShowEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartTooltipShowEventDetail.md) — 타입 정의

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

### tooltipHide

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

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

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

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

### tooltipAction

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

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

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

- [GaugeChartTooltipActionEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartTooltipActionEventDetail.md) — 타입 정의

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

## Methods

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

### redraw

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

```typescript
redraw(): Promise<GaugeChartRenderResult>
```

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

- [GaugeChartRenderResult](https://chart.syidax.com/ko/docs/types/GaugeChartRenderResult.md) — 타입 정의

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

### getActiveTier

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

```typescript
getActiveTier(): Promise<GaugeChartEngineTier>
```

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

- [GaugeChartEngineTier](https://chart.syidax.com/ko/docs/types/GaugeChartEngineTier.md) — 타입 정의

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

### getValue

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

```typescript
getValue(): Promise<number>
```

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

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

### setValue

Set the primary value (animates when `animated`).

```typescript
setValue(value: number): Promise<void>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `value` | `number` | 필수 |

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

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

### addNeedle

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

```typescript
addNeedle(needle: GaugeNeedleSpec, opts?: { insertAt?: number }): Promise<number>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `needle` | `GaugeNeedleSpec` | 필수 |
| `opts` | `{ insertAt?: number }` | 선택 |

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

- [GaugeNeedleSpec](https://chart.syidax.com/ko/docs/types/GaugeNeedleSpec.md) — 타입 정의

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

### removeNeedle

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

```typescript
removeNeedle(idOrIndex: string | number): Promise<boolean>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | 필수 |

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

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

### setRings

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

```typescript
setRings(rings: GaugeActivityRingSpec[]): Promise<void>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `rings` | `GaugeActivityRingSpec[]` | 필수 |

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

- [GaugeActivityRingSpec](https://chart.syidax.com/ko/docs/types/GaugeActivityRingSpec.md) — 타입 정의

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

### setRingValue

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

```typescript
setRingValue(idOrIndex: string | number, value: number): Promise<boolean>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | 필수 |
| `value` | `number` | 필수 |

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

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

### updateNeedle

Gauge-only — patch a needle.

```typescript
updateNeedle(idOrIndex: string | number, patch: Partial<GaugeNeedleSpec>): Promise<boolean>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `idOrIndex` | `string \| number` | 필수 |
| `patch` | `Partial<GaugeNeedleSpec>` | 필수 |

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

- [GaugeNeedleSpec](https://chart.syidax.com/ko/docs/types/GaugeNeedleSpec.md) — 타입 정의

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

### appendPoint

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

```typescript
appendPoint(value: number): Promise<void>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `value` | `number` | 필수 |

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

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

### appendBatch

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

```typescript
appendBatch(values: ReadonlyArray<number>): Promise<void>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `values` | `ReadonlyArray<number>` | 필수 |

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

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

### shift

Drop the oldest streamed categories (the `data` boxes are not the stream).

```typescript
shift(count?: number): Promise<void>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `count` | `number` | 선택 |

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

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

### 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>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `values` | `ReadonlyArray<number>` | 필수 |

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

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

### 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로 기다리세요.

- [GaugeChartStreamSource](https://chart.syidax.com/ko/docs/types/GaugeChartStreamSource.md) — 타입 정의

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

### 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로 기다리세요.

- [GaugeChartEasing](https://chart.syidax.com/ko/docs/types/GaugeChartEasing.md) — 타입 정의
- [GaugeChartAnimationType](https://chart.syidax.com/ko/docs/types/GaugeChartAnimationType.md) — 타입 정의

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

### pauseAnimation

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

```typescript
pauseAnimation(): Promise<void>
```

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

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

### resumeAnimation

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

```typescript
resumeAnimation(): Promise<void>
```

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

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

### replayAnimation

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

```typescript
replayAnimation(): Promise<void>
```

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

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

### 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>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `cssX` | `number` | 필수 |
| `cssY` | `number` | 필수 |

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

- [GaugeChartPointerEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartPointerEventDetail.md) — 타입 정의

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

### 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로 기다리세요.

- [GaugeChartPointerEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartPointerEventDetail.md) — 타입 정의

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

### 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>
```

| 인수 | 타입 | 필수 여부 |
| --- | --- | --- |
| `value` | `number` | 필수 |

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

- [GaugeChartPointerEventDetail](https://chart.syidax.com/ko/docs/types/GaugeChartPointerEventDetail.md) — 타입 정의

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

### hideTooltip

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

```typescript
hideTooltip(): Promise<void>
```

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

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

### 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로 기다리세요.

- [ChartEngineStatus](https://chart.syidax.com/ko/docs/types/ChartEngineStatus.md) — 타입 정의