ProtecteddatasetsOptionaloptions: CustomBarChartOptionsOptionalplugins: anyOptionaldatasetIndexOrData: anyOptionaldata: any추가할 데이터 (단일 객체 또는 배열). 첫 번째 인자가 데이터인 경우 생략.
chartjs-plugin-streaming 플러그인에 전달할 옵션 객체.
실시간 스트리밍 옵션을 설정합니다. 이 메서드를 사용하기 전에, 사용자는 'chartjs-plugin-streaming'을 설치하고 Chart.js에 직접 등록해야 합니다.
// 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
});
};
}
});
true이면 기본 줌 옵션을 적용합니다.
OptionalzoomOption: object사용자 정의 줌 옵션입니다.
ProtectedapplyProtectedapplyProtectedcloneProtectedcloneProtectedconfigProtecteddecorateProtectedensureProtectedextractBeta간트차트 스타일을 적용합니다. 데이터의 x 값은 반드시 yyyy-mm-dd 포맷이어야 합니다. X축을 time scale로 설정하고, indexAxis를 'y'로 설정하여 horizontal bar chart로 표시합니다. 모든 dataset에 borderWidth: 1, borderSkipped: false가 자동으로 적용됩니다.
// 간트차트 데이터 형식 (배열):
const datasets = [
{
label: 'Task 1',
data: [['2024-01-01', '2024-01-05']],
backgroundColor: 'rgba(255, 99, 132, 0.5)'
},
{
label: 'Task 2',
data: [['2024-01-03', '2024-01-08']],
backgroundColor: 'rgba(54, 162, 235, 0.5)'
}
];
// 간트차트 데이터 형식 (객체):
const datasets = [
{
label: 'Task 1',
data: [
{ x: '2024-01-01', y: 0 },
{ x: '2024-01-05', y: 0 }
]
}
];
const chart = ChartWrapper.create('bar', ['Task 1', 'Task 2'], datasets)
.ganttChart()
.build();
@beta (기능 테스트 중)
데이터셋 UID(문자열) 또는 인덱스(숫자)
ProtectedgetProtectedgetProtectedgetProtectedisProtectedisProtectedisProtectedmergeProtectedmustProtectednormalizeProtectednormalizeProtectednormalizeOptionalzoomOption: DeepPartial<CustomZoomType>ProtectedreadProtectedremoveProtectedrequireProtectedrequireProtectedresolveProtectedresolveProtectedresolveProtectedresolveProtectedresolveOptionaloptions: CustomChartOptions<"bar">ProtectedresolveProtectedresolve축의 ID (예: 'x', 'y', 'y1', 'x1')
축 제목 설정 옵션
데이터셋 UID(문자열) 또는 인덱스(숫자)
새로운 데이터셋
Protectedset차트 마운트 직전 DOM 오버레이 spinner를 설정합니다.
실제 동작은 mountChart helper가 담당하며, build(id) 또는 _chartId로 안정적인 canvas id가 필요합니다.
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;
}
});
시간 축을 적용할 축 ID. 기본값은 'x'입니다.
시간 축 상세 설정입니다. 비워두면 기본 시간 축 설정이 적용됩니다.
카테시안 차트에 시간 축을 설정합니다.
축 타입은 기본적으로 time이 적용되며, timeseries, realtime도 설정할 수 있습니다.
별도 옵션을 주지 않으면 DefaultTimeScaleOptions의 기본값이 적용됩니다. 기본값:
unit: 'hour'tooltipFormat: 'yyyy-MM-dd HH:mm'displayFormats.hour: 'HH:mm'parsing 옵션을 함께 전달하면 내부적으로 setParsingKey()를 호출해
{ x, y } 형태 데이터 파싱 설정까지 한 번에 적용합니다.
주의:
type: 'time' 또는 type: 'timeseries'를 사용할 때는 소비 프로젝트에 date adapter가 필요합니다.type: 'realtime'를 사용할 때는 chartjs-plugin-streaming 등록이 필요합니다.// 기본 시간 축 적용
const chart = ChartWrapper.create('line', [], [
{
label: 'Current',
data: [{ x: '2026-06-04 09:00', y: 10 }, { x: '2026-06-04 10:00', y: 18 }]
}
])
.setTimeScale('x', {
parsing: { xAxisKey: 'x', yAxisKey: 'y' }
})
.build('basic-time-line');
OptionalzoomOption: DeepPartial<CustomZoomType>ProtectedtoStaticcreateOptionaloptions: CustomChartOptions<TType>Optionalplugins: Plugin<keyof ChartTypeRegistry, AnyObject>StatichasStaticregister
데이터셋 인덱스(숫자) 또는 추가할 데이터. 숫자가 아니면 데이터로 간주하고 마지막 데이터셋에 추가됩니다.