Pie

values

{ name, value, color? } 배열. 양의 value가 각도를 결정합니다.

• PieChartValues

  타입 정의

width

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

height

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

brandLogo

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

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

brandPosition

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

palette

허용값: tableau10, tableau20, observable10, paired12, set3_12. 기본값: 'tableau10'.

• PieChartPaletteName

  타입 정의

colors

JavaScript 프로퍼티로 전달합니다. 타입: ReadonlyArray<string>.

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

borderColor

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

borderWidth

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

slicedOffset

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

innerSize

도넛의 내부 반지름 비율입니다.

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

size

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

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

centerX

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

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

centerY

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

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

minSize

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

thickness

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

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

startAngle

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

endAngle

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

variableRadius

Variable-radius mode (Highcharts variablepie). Each datum's z maps to the slice's outer radius between min-point-size and max-point-size while value keeps owning the angular sweep. Data without any finite z renders as a uniform pie even when this is on.

sizeBy

'area' (default) scales slice AREA linearly with z (radius ∝ √z̄); 'radius' scales the radius linearly.

• PieChartSizeBy

  타입 정의

zMin

Lower z-domain bound. Defaults to the data minimum; smaller z clamp to the minimum radius.

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

zMax

Upper z-domain bound. Defaults to the data maximum; larger z clamp to the maximum radius.

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

minPointSize

Smallest slice outer DIAMETER — px number or '%' of the full outer diameter (Highcharts minPointSize).

maxPointSize

Largest slice outer DIAMETER — px number or '%' of the full outer diameter (Highcharts maxPointSize).

centerText

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

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

centerSubtext

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

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

chartTitle

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

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

chartSubtitle

차트 내부 부제목입니다.

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

legend

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

legendPosition

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

• PieChartLegendPosition

  타입 정의

legendItems

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

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

• LegendItem

  타입 정의

labelsMode

허용값: none, auto, inside, outside. 기본값: 'none'.

• PieChartLabelMode

  타입 정의

labelsContent

이름·값·비율 중 표시할 내용을 고릅니다.

• PieChartLabelContent

  타입 정의

labelsDistance

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

labelsFontSize

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

labelsFontWeight

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

labelsColor

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

labelsMinSweep

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

labelsConnector

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

labelsConnectorColor

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

labelsConnectorWidth

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

labelsConnectorPadding

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

labelsConnectorShape

허용값: straight, crooked. 기본값: 'crooked'.

labelsAllowOverlap

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

tooltipShow

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

tooltipFormat

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

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

• PieChartResolvedSlice

  타입 정의

enableMouseTracking

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

stickyTracking

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

tooltip

Rich tooltip configuration object — the slice-flavoured counterpart to the cartesian .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.

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

• PieChartTooltipInput

  타입 정의

allowSelect

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

inactiveOtherSlices

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

inactiveSliceOpacity

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

activeSliceIndex

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

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

engine

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

• PieChartEngineMode

  타입 정의

proThreshold

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

unavailable

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

• PieChartUnavailableBehaviour

  타입 정의

streamSource

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

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

• PieChartStreamSource

  타입 정의

streamWindow

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

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

streamMax

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

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

animated

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

animationDuration

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

animationEasing

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

• PieChartEasing

  타입 정의

animationType

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

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

• PieChartAnimationType

  타입 정의

rendered

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

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

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

• PieChartRenderResult

  타입 정의

• PieChartEngineTier

  타입 정의

sliceClick

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

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

chart.addEventListener('sliceClick', event => {
  console.log(event.detail); // PieChartSliceEventDetail
});

• PieChartSliceEventDetail

  타입 정의

sliceHover

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

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

chart.addEventListener('sliceHover', event => {
  console.log(event.detail); // PieChartSliceEventDetail | null
});

• PieChartSliceEventDetail

  타입 정의

pointContextMenu

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

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

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

• ChartPointContextMenuEventDetail

  타입 정의

• PieChartSliceEventDetail

  타입 정의

sliceSelected

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

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

chart.addEventListener('sliceSelected', event => {
  console.log(event.detail); // PieChartSelectedEventDetail
});

• PieChartSelectedEventDetail

  타입 정의

legendItemClick

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

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

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

sliceToggled

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

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

chart.addEventListener('sliceToggled', event => {
  console.log(event.detail); // { index: number; sliceId: 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<PieChartTooltipShowEventDetail>의 detail에서 읽습니다.

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

• PieChartTooltipShowEventDetail

  타입 정의

tooltipHide

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

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

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

tooltipAction

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

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

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

• PieChartTooltipActionEventDetail

  타입 정의

redraw

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

redraw(): Promise<PieChartRenderResult>

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

• PieChartRenderResult

  타입 정의

getActiveTier

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

getActiveTier(): Promise<PieChartEngineTier>

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

• PieChartEngineTier

  타입 정의

addSlice

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

addSlice(datum: PieChartDatum, opts?: { insertAt?: number }): Promise<number>

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

• PieChartDatum

  타입 정의

removeSlice

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

removeSlice(idOrIndex: string | number): Promise<boolean>

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

updateSlice

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

updateSlice(idOrIndex: string | number, patch: Partial<Exclude<PieChartDatum, number>>): Promise<boolean>

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

• PieChartDatum

  타입 정의

setSliceData

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

setSliceData(idOrIndex: string | number, value: number): Promise<boolean>

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

appendPoint

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

appendPoint(datum: PieChartDatum): Promise<void>

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

• PieChartDatum

  타입 정의

appendBatch

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

appendBatch(datums: ReadonlyArray<PieChartDatum>): Promise<void>

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

• PieChartDatum

  타입 정의

shift

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

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

반환 타입: 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(datums: ReadonlyArray<PieChartDatum>): Promise<void>

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

• PieChartDatum

  타입 정의

getStreamSource

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

getStreamSource(): Promise<PieChartStreamSource | undefined>

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

• PieChartStreamSource

  타입 정의

setAnimation

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

setAnimation(options: { duration?: number; easing?: PieChartEasing; enabled?: boolean; type?: PieChartAnimationType }): Promise<void>

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

• PieChartEasing

  타입 정의

• PieChartAnimationType

  타입 정의

pauseAnimation

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

pauseAnimation(): Promise<void>

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

resumeAnimation

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

resumeAnimation(): Promise<void>

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

replayAnimation

Replay the initial sweep-from-zero reveal. No-op when animation is off.

replayAnimation(): Promise<void>

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

selectSlice

Pie-only — select a slice by id or index.

selectSlice(idOrIndex: string | number, selected?: boolean): Promise<boolean>

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

deselectSlice

Pie-only — clear selection on a slice.

deselectSlice(idOrIndex: string | number): Promise<boolean>

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

getSelectedSlices

Pie-only — read the current selection set.

getSelectedSlices(): Promise<string[]>

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

hitTestSlice

Pie-only — hit-test slice at canvas-relative coordinates.

hitTestSlice(cssX: number, cssY: number): Promise<{ sliceIndex: number; sliceId: string } | null>

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

showTooltipAtSlice

Pie-only — programmatic tooltip open.

showTooltipAtSlice(idOrIndex: string | number): Promise<PieChartSliceEventDetail | null>

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

• PieChartSliceEventDetail

  타입 정의

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

  타입 정의