Class Chart<TType, TOptions>`Abstract`

Type Parameters

TType extends ChartType
TOptions extends CustomChartOptions<TType> = CustomChartOptions<TType>

Hierarchy (View Summary)

Chart

Implements

ChartBuilder<TType>

Accessors

`Protected`datasets

get datasets(): CustomChartDatasets<TType>[]
Returns CustomChartDatasets<TType>[]
- Defined in src/wrappers/Chart.ts:48
set datasets(value: CustomChartDatasets<TType>[]): void
Parameters
- value: CustomChartDatasets<TType>[]
Returns void
- Defined in src/wrappers/Chart.ts:51

Constructors

constructor

new Chart<
    TType extends keyof ChartTypeRegistry,
    TOptions extends CustomChartOptions<TType> = CustomChartOptions<TType>,
>(
    type: TType,
    labels: (string | number)[] | undefined,
    _datasets: CustomChartDatasets<TType>[],
    options: TOptions,
    plugins?: any,
): Chart<TType, TOptions>
Type Parameters
- TType extends keyof ChartTypeRegistry
- TOptions extends CustomChartOptions<TType> = CustomChartOptions<TType>
Parameters
- type: TType
- labels: (string | number)[] | undefined
- _datasets: CustomChartDatasets<TType>[]
- options: TOptions
- Optionalplugins: any
Returns Chart<TType, TOptions>
- Defined in src/wrappers/Chart.ts:55

Methods

addStreaming

addStreaming(streamingOptions: StreamingOptions): this

Parameters

streamingOptions: StreamingOptions
chartjs-plugin-streaming 플러그인에 전달할 옵션 객체.

Returns this

Description

실시간 스트리밍 옵션을 설정합니다. 이 메서드를 사용하기 전에, 사용자는 'chartjs-plugin-streaming'을 설치하고 Chart.js에 직접 등록해야 합니다.

Since

1.8.0

Example

// 1. 사용자 측에서 웹소켓 등 데이터 소스 설정
const myWebSocket = new WebSocket('wss://my-data-source');

// 2. ChartWrapper에 스트리밍 옵션 적용
chart.addStreaming({
  duration: 20000, // 20초 분량의 데이터를 차트에 표시
  refresh: 1000,    // 1초마다 차트 업데이트
  onRefresh: (chart) => {
    // 3. 데이터 소스로부터 받은 데이터를 차트에 추가
    myWebSocket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      chart.data.datasets[0].data.push({
        x: data.timestamp,
        y: data.value
      });
    };
  }
});

`Protected`applyGlobalPluginConfig

applyGlobalPluginConfig(): void
Returns void
- Defined in src/wrappers/Chart.ts:92

`Abstract`build

build(id?: string): ChartConfig
Parameters
- Optionalid: string
Returns ChartConfig
Implementation of ChartBuilder.build
- Defined in src/wrappers/Chart.ts:207

clearData

clearData(datasetUidOrIndex?: string | number): this
Parameters
- OptionaldatasetUidOrIndex: string | number
Returns this
Description
데이터셋 데이터를 비웁니다. 식별자를 생략하면 모든 데이터셋을 비웁니다.

Since
2.4.0
Implementation of ChartBuilder.clearData
- Defined in src/wrappers/Chart.ts:550

clone

clone(): this
Returns this
Implementation of ChartBuilder.clone
- Defined in src/wrappers/Chart.ts:176

`Protected`clonePlugins

clonePlugins<TPlugins>(plugins: TPlugins): TPlugins
Type Parameters
- TPlugins
Parameters
- plugins: TPlugins
Returns TPlugins
- Defined in src/wrappers/Chart.ts:88

`Protected`cloneValue

cloneValue<T>(value: T): T
Type Parameters
- T
Parameters
- value: T
Returns T
- Defined in src/wrappers/Chart.ts:84

`Protected` `Abstract`configAop

configAop(config: any): any
Parameters
- config: any
Returns any
- Defined in src/wrappers/Chart.ts:206

copy

copy(): this
Returns this
Implementation of ChartBuilder.copy
- Defined in src/wrappers/Chart.ts:186

getChartData

getChartData(uid: string): CustomChartDatasets<TType>
Beta
Parameters
- uid: string
Returns CustomChartDatasets<TType>
Description
특정 데이터셋을 식별자(UID 또는 라벨)로 조회합니다.

Since
1.0.0
Example
```
const dataset = chart.getChartData('dataset-uid-or-label');
console.log(dataset);
@beta
```
Implementation of ChartBuilder.getChartData
- Defined in src/wrappers/Chart.ts:435

`Protected`getDatasetByTarget

getDatasetByTarget(uidOrIndex: string | number): CustomChartDatasets<TType>
Parameters
- uidOrIndex: string | number
Returns CustomChartDatasets<TType>
- Defined in src/wrappers/Chart.ts:143

`Protected`getDatasetVisibilityState

getDatasetVisibilityState(dataset: CustomChartDatasets<TType>): boolean
Parameters
- dataset: CustomChartDatasets<TType>
Returns boolean
- Defined in src/wrappers/Chart.ts:168

`Protected`getGroupedDatasetIndexes

getGroupedDatasetIndexes(index: number): number[]
Parameters
- index: number
Returns number[]
- Defined in src/wrappers/Chart.ts:147

hasPlugin

hasPlugin(pluginId: string): boolean
Parameters
- pluginId: string
Returns boolean
Description
플러그인이 존재하는지 확인합니다.

Since
1.0.0
Implementation of ChartBuilder.hasPlugin
- Defined in src/wrappers/Chart.ts:270

makeConfig

makeConfig(id?: string): ChartConfig
Parameters
- Optionalid: string
Returns ChartConfig
Description
레거시 지원용 차트 설정 객체를 생성합니다.

Since
1.0.0
Implementation of ChartBuilder.makeConfig
- Defined in src/wrappers/Chart.ts:244

mergeOptions

mergeOptions(options: DeepPartial<TOptions>): this
Parameters
- options: DeepPartial<TOptions>
Returns this
Description
기존 옵션에 부분 옵션을 병합합니다.

Since
2.4.0
Implementation of ChartBuilder.mergeOptions
- Defined in src/wrappers/Chart.ts:419

`Protected`mergePlugins

mergePlugins<TPlugin>(
plugins: TPlugin[] | undefined,
required: TPlugin[],
): TPlugin[]
Type Parameters
- TPlugin
Parameters
- plugins: TPlugin[] | undefined
- required: TPlugin[]
Returns TPlugin[]
- Defined in src/wrappers/Chart.ts:190

`Protected` `Abstract`normalize

normalize(): void
Returns void
- Defined in src/wrappers/Chart.ts:205

onResize

onResize(
    callback: (
        chart: Chart<TType>,
        size: { height: number; width: number },
    ) => void,
): this
Beta
Parameters
- callback: (chart: Chart<TType>, size: { height: number; width: number }) => void
Returns this
Description
차트 리사이즈 이벤트 콜백 함수를 설정합니다.

Since
1.0.0
Implementation of ChartBuilder.onResize
- Defined in src/wrappers/Chart.ts:285

removeData

removeData(
datasetUidOrIndex: string | number,
dataUidOrIndex?: string | number,
): this
Parameters
- datasetUidOrIndex: string | number
- OptionaldataUidOrIndex: string | number
Returns this
Description
특정 데이터셋의 데이터 포인트를 제거합니다. 데이터 식별자를 생략하면 마지막 포인트를 제거합니다.

Since
2.4.0
Implementation of ChartBuilder.removeData
- Defined in src/wrappers/Chart.ts:514

removeDataset

removeDataset(uidOrIndex: string | number): this
Parameters
- uidOrIndex: string | number
Returns this
Description
데이터셋을 UID, 라벨 또는 인덱스로 제거합니다.

Since
2.4.0
Implementation of ChartBuilder.removeDataset
- Defined in src/wrappers/Chart.ts:500

removePlugin

removePlugin(pluginId: string): this
Parameters
- pluginId: string
Returns this
Description
플러그인을 제거합니다.

Since
1.0.0
Implementation of ChartBuilder.removePlugin
- Defined in src/wrappers/Chart.ts:254

`Protected`requireDatasets

requireDatasets(): CustomChartDatasets<TType>[]
Returns CustomChartDatasets<TType>[]
- Defined in src/wrappers/Chart.ts:116

`Protected`resolveDatasetIndex

resolveDatasetIndex(uidOrIndex: string | number): number
Parameters
- uidOrIndex: string | number
Returns number
- Defined in src/wrappers/Chart.ts:124

setAllDatasetStyle

setAllDatasetStyle(style: DeepPartial<CustomChartDatasets<TType>>): this
Parameters
- style: DeepPartial<CustomChartDatasets<TType>>
Returns this
Description
모든 데이터셋에 동일한 부분 스타일을 병합합니다.

Since
2.4.0
Implementation of ChartBuilder.setAllDatasetStyle
- Defined in src/wrappers/Chart.ts:484

setChartData

setChartData(uid: string, newDataset: CustomChartDatasets<TType>): void
Beta
Parameters
- uid: string
- newDataset: CustomChartDatasets<TType>
Returns void
Description
특정 데이터셋을 식별자(UID 또는 라벨)로 찾아 새로운 데이터셋으로 교체합니다.

Since
1.0.0
Example
```
chart.setChartData('dataset-uid-or-label', { label: 'New Dataset', data: [10, 20, 30] });
@beta
```
Implementation of ChartBuilder.setChartData
- Defined in src/wrappers/Chart.ts:452

setDatasetGroup

setDatasetGroup(uidOrIndex: string | number, group: string | number): this
Parameters
- uidOrIndex: string | number
- group: string | number
Returns this
Description
데이터셋 그룹을 지정합니다. 같은 그룹은 토글 시 함께 제어할 수 있습니다.

Since
2.4.0
Implementation of ChartBuilder.setDatasetGroup
- Defined in src/wrappers/Chart.ts:620

setDatasetStyle

setDatasetStyle(
uidOrIndex: string | number,
style: DeepPartial<CustomChartDatasets<TType>>,
): this
Parameters
- uidOrIndex: string | number
- style: DeepPartial<CustomChartDatasets<TType>>
Returns this
Description
특정 데이터셋에 부분 스타일을 병합합니다.

Since
2.4.0
Implementation of ChartBuilder.setDatasetStyle
- Defined in src/wrappers/Chart.ts:471

`Protected`setDatasetVisibilityState

setDatasetVisibilityState(
dataset: CustomChartDatasets<TType>,
visible: boolean,
): void
Parameters
- dataset: CustomChartDatasets<TType>
- visible: boolean
Returns void
- Defined in src/wrappers/Chart.ts:163

setDatasetVisible

setDatasetVisible(
    uidOrIndex: string | number,
    visible: boolean,
    syncGroup?: boolean,
): this
Parameters
- uidOrIndex: string | number
- visible: boolean
- syncGroup: boolean = true
Returns this
Description
데이터셋의 표시 상태를 설정합니다. 그룹이 있으면 같은 그룹에 함께 반영할 수 있습니다.

Since
2.4.0
Implementation of ChartBuilder.setDatasetVisible
- Defined in src/wrappers/Chart.ts:572

setLegend

setLegend(legendOptions: DeepPartial<LegendOptions<TType>>): this

Parameters

legendOptions: DeepPartial<LegendOptions<TType>>

Returns this

Description

차트의 범례를 설정합니다.

Since

1.0.0

Example

chart.setLegend({
position: 'bottom',
  align: 'center',
  labels: {
    boxWidth: 40,
    padding: 15,
    font: {
      size: 14,
      weight: 'bold'
    },
    color: '#333',
    usePointStyle: true
  }
  onClick: (e, legendItem, legend) => {
    console.log('Legend clicked:', legendItem);
  }
});

setPlugin

setPlugin(plugin: any, replaceIfExists?: boolean): this
Parameters
- plugin: any
  단일 플러그인 또는 플러그인 배열
- replaceIfExists: boolean = true
Returns this
Description
플러그인을 추가합니다. 단일 플러그인 또는 플러그인 배열을 받을 수 있습니다.

Since
1.0.0
Implementation of ChartBuilder.setPlugin
- Defined in src/wrappers/Chart.ts:215

setSpinnerOverlay

setSpinnerOverlay(spinnerOverlay: SpinnerOverlayOption): this

Parameters

spinnerOverlay: SpinnerOverlayOption

Returns this

Description

차트 마운트 직전 DOM 오버레이 spinner를 설정합니다. 실제 동작은 mountChart helper가 담당하며, build(id) 또는 _chartId로 안정적인 canvas id가 필요합니다.

Since

2.4.0

Example

chart.setSpinnerOverlay(true);

Example

chart.setSpinnerOverlay({
  enabled: true,
  text: '차트 준비 중...',
  minVisibleMs: 200,
});

Example

chart.setSpinnerOverlay({
  enabled: true,
  text: false,
  spinner: () => {
    const spinner = document.createElement('div');
    spinner.innerHTML = '<svg width="42" height="42" viewBox="0 0 42 42"><circle cx="21" cy="21" r="18" fill="none" stroke="#bfdbfe" stroke-width="4" /><path d="M21 3 A18 18 0 0 1 39 21" fill="none" stroke="#2563eb" stroke-width="4" stroke-linecap="round" /></svg>';
    return spinner;
  }
});

setTitle

setTitle(titleOptions: DeepPartial<CommonCartesianTitleConfig>): this
Parameters
- titleOptions: DeepPartial<CommonCartesianTitleConfig>
Returns this
Description
차트의 제목을 설정합니다.

Since
1.0.0
Example
```
chart.setTitle({
  text: '차트 제목',
  align: 'center'  // 'start' | 'center' | 'end'
});
```
Implementation of ChartBuilder.setTitle
- Defined in src/wrappers/Chart.ts:304

setTooltip

setTooltip(tooltipOptions: DeepPartial<TooltipOptions<TType>>): this
Parameters
- tooltipOptions: DeepPartial<TooltipOptions<TType>>
Returns this
Description
차트의 툴팁을 설정합니다. 전역 setChartConfig({ tooltip: ... }) 설정이 있으면 이를 기본값으로 사용하고, 이 메서드 호출값으로 병합합니다.

Since
2.4.0
Example
```
chart.setTooltip({
  enabled: true,
  backgroundColor: 'rgba(8, 26, 61, 0.95)'
});
```
Implementation of ChartBuilder.setTooltip
- Defined in src/wrappers/Chart.ts:366

toggleDataset

toggleDataset(uidOrIndex: string | number, syncGroup?: boolean): this
Parameters
- uidOrIndex: string | number
- syncGroup: boolean = true
Returns this
Description
데이터셋의 표시 상태를 토글합니다.

Since
2.4.0
Implementation of ChartBuilder.toggleDataset
- Defined in src/wrappers/Chart.ts:603

`Static`create

create<TType extends keyof ChartTypeRegistry>(
    type: TType,
    labels: (string | number)[],
    datasets: CustomChartDatasets<TType>[],
    options?: CustomChartOptions<TType>,
    plugins?: Plugin<keyof ChartTypeRegistry, AnyObject>,
): TType extends keyof ChartBuilderMap
    ? ChartBuilderMap[TType]
    : ChartBuilder<TType>
Type Parameters
- TType extends keyof ChartTypeRegistry
Parameters
- type: TType
- labels: (string | number)[]
- datasets: CustomChartDatasets<TType>[]
- Optionaloptions: CustomChartOptions<TType>
- Optionalplugins: Plugin<keyof ChartTypeRegistry, AnyObject>
Returns TType extends keyof ChartBuilderMap
? ChartBuilderMap[TType]
: ChartBuilder<TType>
- Defined in src/wrappers/Chart.ts:64

`Static`has

has(type: keyof ChartTypeRegistry): boolean
Parameters
- type: keyof ChartTypeRegistry
Returns boolean
- Defined in src/wrappers/Chart.ts:80

`Static`register

register<TType extends keyof ChartTypeRegistry, TInstance>(
type: TType,
wrapperClass: Constructor<TType, TInstance>,
): void
Type Parameters
- TType extends keyof ChartTypeRegistry
- TInstance
Parameters
- type: TType
- wrapperClass: Constructor<TType, TInstance>
Returns void
- Defined in src/wrappers/Chart.ts:75

Properties

`Private`_datasets

_datasets: CustomChartDatasets<TType>[]

`Protected`labels

labels: (string | number)[] | undefined

`Protected`options

options: TOptions

`Protected` `Optional`plugins

plugins?: any

`Protected`type

type: TType

Class Chart<TType, TOptions>Abstract

Type Parameters

Hierarchy (View Summary)

Implements

Index

Accessors

Constructors

Methods

Properties

Accessors

Protecteddatasets

Returns CustomChartDatasets<TType>[]

Parameters

Returns void

Constructors

constructor

Type Parameters

Parameters

Returns Chart<TType, TOptions>

Methods

addStreaming

Parameters

Returns this

Description

Since

Example

ProtectedapplyGlobalPluginConfig

Returns void

Abstractbuild

Parameters

Returns ChartConfig

clearData

Parameters

Returns this

Description

Since

clone

Returns this

ProtectedclonePlugins

Type Parameters

Parameters

Returns TPlugins

ProtectedcloneValue

Type Parameters

Parameters

Returns T

Protected AbstractconfigAop

Parameters

Returns any

copy

Returns this

getChartData

Parameters

Returns CustomChartDatasets<TType>

Description

Since

Example

ProtectedgetDatasetByTarget

Parameters

Returns CustomChartDatasets<TType>

ProtectedgetDatasetVisibilityState

Parameters

Returns boolean

ProtectedgetGroupedDatasetIndexes

Parameters

Returns number[]

hasPlugin

Parameters

Returns boolean

Description

Since

makeConfig

Parameters

Returns ChartConfig

Description

Since

mergeOptions

Parameters

Returns this

Description

Class Chart<TType, TOptions>`Abstract`

`Protected`datasets

`Protected`applyGlobalPluginConfig

`Abstract`build

`Protected`clonePlugins

`Protected`cloneValue

`Protected` `Abstract`configAop

`Protected`getDatasetByTarget

`Protected`getDatasetVisibilityState

`Protected`getGroupedDatasetIndexes

`Protected`mergePlugins

`Protected` `Abstract`normalize

`Protected`requireDatasets

`Protected`resolveDatasetIndex

`Protected`setDatasetVisibilityState