sy-gauge-chart
Gauge
한 지표의 현재 상태를 정해진 범위에서 읽습니다.
sy-gauge-chart
목표 달성률·용량·속도처럼 범위가 명확한 값에 사용하세요.
시간에 따른 추세는 별도 차트로 보여주세요. 범위를 넘는 값과 경계의 의미를 설명하세요.
기본 차트 등급: Community. 추가 렌더러·커스텀 브랜딩 등 기능의 권한은 별도입니다.
| 입력 | 데이터 설명 |
|---|---|
value | 현재 측정값입니다. |
min | 측정 범위의 시작입니다. |
max | 측정 범위의 끝입니다. |
variant | solid·dial 등 게이지 표현입니다. |
- Components에서 실행하기
옵션 변경과 프레임워크별 코드
- 공통 설치와 연결
전체 적용 예제
<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 attribute | value |
| 타입 | number |
| 기본값 | 0 |
min
측정 범위의 시작입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | min |
| HTML attribute | min |
| 타입 | number |
| 기본값 | 0 |
max
측정 범위의 끝입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | max |
| HTML attribute | max |
| 타입 | 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는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- GaugeNeedleSpec
타입 정의
width
차트의 너비를 px 단위로 지정합니다. 컨테이너 너비가 변하는 앱에서는 ResizeObserver에서 width를 갱신하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | width |
| HTML attribute | width |
| 타입 | number |
| 기본값 | 320 |
height
차트의 높이를 px 단위로 지정합니다. 축, 제목과 범례가 차지하는 공간을 함께 고려하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | height |
| HTML attribute | height |
| 타입 | number |
| 기본값 | 280 |
brandLogo
기본값은 Syidax 심볼과 워드마크입니다. Pro의 chart.branding 권한으로 none을 지정해 제거하거나 PNG·JPEG·WebP data URL로 교체할 수 있습니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | brandLogo |
| HTML attribute | brand-logo |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
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 |
variant
solid·dial 등 게이지 표현입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | variant |
| HTML attribute | variant |
| 타입 | GaugeChartVariant |
| 기본값 | 'dial' |
| 허용값 | solid, dial, activity, vuMeter, speedometer, clock |
- GaugeChartVariant
타입 정의
startAngle
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | startAngle |
| HTML attribute | start-angle |
| 타입 | number |
| 기본값 | -150 |
endAngle
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | endAngle |
| HTML attribute | end-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 attribute | thickness |
| 타입 | 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 attribute | time |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
showSeconds
Clock-variant second hand (thin, red).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | showSeconds |
| HTML attribute | show-seconds |
| 타입 | boolean |
| 기본값 | true |
color
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | color |
| HTML attribute | color |
| 타입 | 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는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- GaugeColorStop
타입 정의
needleShape
허용값: needle, arrow, line, wedge. 기본값: 'needle'.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | needleShape |
| HTML attribute | needle-shape |
| 타입 | GaugeNeedleShape |
| 기본값 | 'needle' |
| 허용값 | needle, arrow, line, wedge |
- GaugeNeedleShape
타입 정의
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 attribute | needle-width |
| 타입 | number |
| 기본값 | 8 |
pivotRadius
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | pivotRadius |
| HTML attribute | pivot-radius |
| 타입 | number |
| 기본값 | 7 |
pivotColor
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | pivotColor |
| HTML attribute | pivot-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는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- GaugePlotBand
타입 정의
bandThickness
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | bandThickness |
| HTML attribute | band-thickness |
| 타입 | number |
| 기본값 | 14 |
bandTrackColor
The 'empty' track behind plot bands — the un-zoned part of the axis.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | bandTrackColor |
| HTML attribute | band-track-color |
| 타입 | string |
| 기본값 | '#eef2f7' |
rounded
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | rounded |
| HTML attribute | rounded |
| 타입 | boolean |
| 기본값 | true |
trackColor
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | trackColor |
| HTML attribute | track-color |
| 타입 | string |
| 기본값 | '#e5e7eb' |
showTicks
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | showTicks |
| HTML attribute | show-ticks |
| 타입 | boolean |
| 기본값 | true |
tickInterval
허용값: auto. 기본값: 'auto'.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tickInterval |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | number | 'auto' |
| 기본값 | 'auto' |
| 타입에 포함된 리터럴 | auto |
minorTicks
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | minorTicks |
| HTML attribute | minor-ticks |
| 타입 | number |
| 기본값 | 4 |
tickLength
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tickLength |
| HTML attribute | tick-length |
| 타입 | number |
| 기본값 | 9 |
minorTickLength
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | minorTickLength |
| HTML attribute | minor-tick-length |
| 타입 | number |
| 기본값 | 6 |
tickWidth
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tickWidth |
| HTML attribute | tick-width |
| 타입 | number |
| 기본값 | 2 |
minorTickWidth
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | minorTickWidth |
| HTML attribute | minor-tick-width |
| 타입 | number |
| 기본값 | 1 |
tickColor
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tickColor |
| HTML attribute | tick-color |
| 타입 | string |
| 기본값 | '#94a3b8' |
showTickLabels
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | showTickLabels |
| HTML attribute | show-tick-labels |
| 타입 | boolean |
| 기본값 | true |
tickLabelDistance
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tickLabelDistance |
| HTML attribute | tick-label-distance |
| 타입 | number |
| 기본값 | 7 |
tickLabelColor
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tickLabelColor |
| HTML attribute | tick-label-color |
| 타입 | string |
| 기본값 | '#64748b' |
tickLabelFontSize
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tickLabelFontSize |
| HTML attribute | tick-label-font-size |
| 타입 | number |
| 기본값 | 11 |
tickLabelFormat
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tickLabelFormat |
| HTML attribute | tick-label-format |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
showValue
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: boolean.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | showValue |
| HTML attribute | show-value |
| 타입 | boolean |
| 기본값 | true |
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
타입 정의
valueFormat
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | valueFormat |
| HTML attribute | value-format |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
valueColor
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | valueColor |
| HTML attribute | value-color |
| 타입 | string |
| 기본값 | '#0f172a' |
valueFontSize
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | valueFontSize |
| HTML attribute | value-font-size |
| 타입 | number |
| 기본값 | 26 |
unit
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | unit |
| HTML attribute | unit |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
centerText
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | centerText |
| HTML attribute | center-text |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
centerSubtext
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: string.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | centerSubtext |
| HTML attribute | center-subtext |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
chartTitle
차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | chartTitle |
| HTML attribute | chart-title |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
chartSubtitle
차트 내부 부제목입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | chartSubtitle |
| HTML attribute | chart-subtitle |
| 타입 | string |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
tooltipShow
내장 툴팁 표시 여부입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | tooltipShow |
| HTML attribute | tooltip-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 attribute | enable-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 attribute | legend |
| 타입 | boolean |
| 기본값 | false |
legendPosition
범례를 배치할 위치입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | legendPosition |
| HTML attribute | legend-position |
| 타입 | GaugeChartLegendPosition |
| 기본값 | 'bottom' |
| 허용값 | top, bottom, left, right |
legendItems
JavaScript 프로퍼티로 전달합니다. 타입: LegendItem[].
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | legendItems |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | LegendItem[] |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
- LegendItem
타입 정의
animated
초기 표시와 데이터 변경의 애니메이션 사용 여부입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | animated |
| HTML attribute | animate |
| 타입 | boolean |
| 기본값 | false |
animationDuration
애니메이션 지속 시간(ms).
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | animationDuration |
| HTML attribute | animation-duration |
| 타입 | number |
| 기본값 | 900 |
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
타입 정의
animationType
허용값: initial, update. 기본값: undefined.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | animationType |
| HTML attribute | animation-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 attribute | analog-damping |
| 타입 | number |
| 기본값 | 5 |
analogFrequency
analog swing frequency (1..n) — higher = more wobbles packed into the settle.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | analogFrequency |
| HTML attribute | analog-frequency |
| 타입 | number |
| 기본값 | 18 |
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 |
streamSource
실시간 데이터를 전달하는 스트림 소스입니다. 해당 타입의 계약을 확인하세요.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | streamSource |
| HTML attribute | 객체·배열·콜백은 JavaScript 프로퍼티로 전달 |
| 타입 | GaugeChartStreamSource |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
streamWindow
화면에 유지할 스트리밍 데이터 구간입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | streamWindow |
| HTML attribute | stream-window |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
streamMax
보관할 스트리밍 데이터의 최대 수입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | streamMax |
| HTML attribute | stream-max |
| 타입 | number |
| 기본값 | undefined |
undefined는 이 속성을 명시하지 않은 상태입니다. 실제 표시 값은 차트 종류와 다른 설정에 따라 결정될 수 있습니다.
engine
auto·standard·pro 렌더러 선택입니다. 엔진 선택은 차트 종류의 Pro 사용 권한과 별개입니다.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | engine |
| HTML attribute | engine |
| 타입 | GaugeChartEngineMode |
| 기본값 | 'auto' |
| 허용값 | auto, standard, pro |
- GaugeChartEngineMode
타입 정의
proThreshold
HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number.
| 항목 | 값 |
|---|---|
| JavaScript 프로퍼티 | proThreshold |
| HTML attribute | pro-threshold |
| 타입 | number |
| 기본값 | 50_000 |
Events
rendered
차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다.
이벤트 이름: rendered. 대소문자를 구분합니다. payload는 CustomEvent<GaugeChartRenderResult & { tier: GaugeChartEngineTier }>의 detail에서 읽습니다.
chart.addEventListener('rendered', event => {
console.log(event.detail); // GaugeChartRenderResult & { tier: GaugeChartEngineTier }
});gaugeClick
CustomEvent.detail 타입: GaugeChartPointerEventDetail. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: gaugeClick. 대소문자를 구분합니다. payload는 CustomEvent<GaugeChartPointerEventDetail>의 detail에서 읽습니다.
chart.addEventListener('gaugeClick', event => {
console.log(event.detail); // GaugeChartPointerEventDetail
});gaugeHover
CustomEvent.detail 타입: GaugeChartPointerEventDetail | null. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: gaugeHover. 대소문자를 구분합니다. payload는 CustomEvent<GaugeChartPointerEventDetail | null>의 detail에서 읽습니다.
chart.addEventListener('gaugeHover', event => {
console.log(event.detail); // GaugeChartPointerEventDetail | null
});pointContextMenu
CustomEvent.detail 타입: ChartPointContextMenuEventDetail<GaugeChartPointerEventDetail>. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: pointContextMenu. 대소문자를 구분합니다. payload는 CustomEvent<ChartPointContextMenuEventDetail<GaugeChartPointerEventDetail>>의 detail에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
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에서 읽습니다.
chart.addEventListener('appended', event => {
console.log(event.detail); // { count: number }
});windowSlid
CustomEvent.detail 타입: { dropped: number }. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: windowSlid. 대소문자를 구분합니다. payload는 CustomEvent<{ dropped: number }>의 detail에서 읽습니다.
chart.addEventListener('windowSlid', event => {
console.log(event.detail); // { dropped: number }
});chartAnimationStart
CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: chartAnimationStart. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.
chart.addEventListener('chartAnimationStart', event => {
console.log(event.detail); // void
});chartAnimationEnd
CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: chartAnimationEnd. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.
chart.addEventListener('chartAnimationEnd', event => {
console.log(event.detail); // void
});chartAnimationInterrupted
CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: chartAnimationInterrupted. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.
chart.addEventListener('chartAnimationInterrupted', event => {
console.log(event.detail); // void
});tooltipShow
내장 툴팁 표시 여부입니다.
이벤트 이름: tooltipShow. 대소문자를 구분합니다. payload는 CustomEvent<GaugeChartTooltipShowEventDetail>의 detail에서 읽습니다.
chart.addEventListener('tooltipShow', event => {
console.log(event.detail); // GaugeChartTooltipShowEventDetail
});tooltipHide
CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: tooltipHide. 대소문자를 구분합니다. payload는 CustomEvent<void>의 detail에서 읽습니다.
chart.addEventListener('tooltipHide', event => {
console.log(event.detail); // void
});tooltipAction
CustomEvent.detail 타입: GaugeChartTooltipActionEventDetail. 이벤트 이름은 대소문자를 구분합니다.
이벤트 이름: tooltipAction. 대소문자를 구분합니다. payload는 CustomEvent<GaugeChartTooltipActionEventDetail>의 detail에서 읽습니다.
chart.addEventListener('tooltipAction', event => {
console.log(event.detail); // GaugeChartTooltipActionEventDetail
});Methods
redraw
현재 데이터와 옵션으로 차트를 다시 그립니다. 반환되는 Promise가 완료되면 렌더링 결과를 확인할 수 있습니다.
redraw(): Promise<GaugeChartRenderResult>반환 타입: Promise<GaugeChartRenderResult>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
getActiveTier
비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
getActiveTier(): Promise<GaugeChartEngineTier>반환 타입: Promise<GaugeChartEngineTier>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- GaugeChartEngineTier
타입 정의
getValue
The dB value of a cell (null when empty or outside the grid).
getValue(): Promise<number>반환 타입: Promise<number>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
setValue
Set the primary value (animates when animated).
setValue(value: number): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
value | number | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
addNeedle
Gauge-only — add a needle (dial variant).
addNeedle(needle: GaugeNeedleSpec, opts?: { insertAt?: number }): Promise<number>| 인수 | 타입 | 필수 여부 |
|---|---|---|
needle | GaugeNeedleSpec | 필수 |
opts | { insertAt?: number } | 선택 |
반환 타입: Promise<number>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- GaugeNeedleSpec
타입 정의
removeNeedle
Gauge-only — remove a needle by id or index.
removeNeedle(idOrIndex: string | number): Promise<boolean>| 인수 | 타입 | 필수 여부 |
|---|---|---|
idOrIndex | string | number | 필수 |
반환 타입: Promise<boolean>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
setRings
Replace the activity ring set (animates per ring when animated).
setRings(rings: GaugeActivityRingSpec[]): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
rings | GaugeActivityRingSpec[] | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
setRingValue
Update ONE activity ring's value by id, name, or index (animates when animated).
setRingValue(idOrIndex: string | number, value: number): Promise<boolean>| 인수 | 타입 | 필수 여부 |
|---|---|---|
idOrIndex | string | number | 필수 |
value | number | 필수 |
반환 타입: Promise<boolean>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
updateNeedle
Gauge-only — patch a needle.
updateNeedle(idOrIndex: string | number, patch: Partial<GaugeNeedleSpec>): Promise<boolean>| 인수 | 타입 | 필수 여부 |
|---|---|---|
idOrIndex | string | number | 필수 |
patch | Partial<GaugeNeedleSpec> | 필수 |
반환 타입: Promise<boolean>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- GaugeNeedleSpec
타입 정의
appendPoint
스트림에 값 하나를 추가합니다. 메서드 인수 타입과 스트리밍 기능의 라이선스 조건을 확인하세요.
appendPoint(value: number): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
value | number | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
appendBatch
스트림에 여러 값을 한 번에 추가합니다. 메서드 인수 타입과 스트리밍 기능의 라이선스 조건을 확인하세요.
appendBatch(values: ReadonlyArray<number>): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
values | ReadonlyArray<number> | 필수 |
반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
shift
Drop the oldest streamed categories (the data boxes are not the stream).
shift(count?: number): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
count | number | 선택 |
반환 타입: 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).
replace(values: ReadonlyArray<number>): Promise<void>| 인수 | 타입 | 필수 여부 |
|---|---|---|
values | ReadonlyArray<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.
getStreamSource(): Promise<GaugeChartStreamSource | undefined>반환 타입: Promise<GaugeChartStreamSource | undefined>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
setAnimation
비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요.
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
타입 정의
- GaugeChartAnimationType
타입 정의
pauseAnimation
진행 중인 애니메이션을 일시 정지합니다.
pauseAnimation(): Promise<void>반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
resumeAnimation
일시 정지한 애니메이션을 다시 진행합니다.
resumeAnimation(): Promise<void>반환 타입: Promise<void>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
replayAnimation
Replay the initial sweep from min → value(s). No-op when animation is off / reduced.
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.
hitTest(cssX: number, cssY: number): Promise<GaugeChartPointerEventDetail | null>| 인수 | 타입 | 필수 여부 |
|---|---|---|
cssX | number | 필수 |
cssY | number | 필수 |
반환 타입: 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.
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.
showTooltipAtValue(value: number): Promise<GaugeChartPointerEventDetail | null>| 인수 | 타입 | 필수 여부 |
|---|---|---|
value | number | 필수 |
반환 타입: Promise<GaugeChartPointerEventDetail | null>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
hideTooltip
현재 표시 중인 툴팁을 닫습니다.
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.
getEngineStatus(): Promise<ChartEngineStatus>반환 타입: Promise<ChartEngineStatus>. 요소 등록이 끝난 뒤 메서드를 호출하고 Promise 결과를 await로 기다리세요.
- ChartEngineStatus
타입 정의