using npm :

npm install stz-chart-maker
npm install -D stz-chart-maker

api Docs

📚 API 문서

example

const chartConfig = ChartWrapper
                    .create('bar', data.labels , data.datasets, {})
                    .addDataLabels(true)
                    .addZoom(true)
                    .build('mixed-chart');

return (
<div>
  <Chart type={chartConfig.type} data={chartConfig.data} options={chartConfig.options} />
</div>
);

Quick Start

import { ChartWrapper } from 'stz-chart-maker';
import { Chart } from 'react-chartjs-2';

const chart = ChartWrapper
  .create('bar', ['A', 'B', 'C'], [{ data: [10, 20, 30] }])
  .addZoom(true)
  .addDataLabels(true)
  .build('basic-bar');

<Chart {...chart} />;

Configuration (Browser)

stz-chart-maker는 런타임에 설정 파일을 직접 읽지 않습니다.
브라우저 환경에서는 setChartConfig()로 전역 설정을 전달하세요.

1) 앱 코드에서 직접 전역 설정 (권장)

import { setChartConfig } from 'stz-chart-maker';

setChartConfig({
  errorLogging: true,
  silentMode: false,
  defaultColor: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F']
});

2) 번들러 플러그인으로 설정 주입

.stzrc.js를 사용할 경우, 번들러 플러그인이 빌드 시점에 설정을 읽어 setChartConfig(...)를 주입합니다.

// .stzrc.js
module.exports = {
  defaultColor: ['#111111', '#22c55e', '#3b82f6']
};

설정 옵션

| 옵션 | 타입 | 기본값 | 설명 | |------|------|--------|------| | errorLogging | boolean | true | 에러 로그 출력 여부 | | silentMode | boolean | true | 에러 발생 시 예외를 던지지 않고 처리 | | defaultColor | string[] | 내부 기본 팔레트 | 차트 전역 기본 색상 배열 |

주의사항

setChartConfig()는 첫 번째 ChartWrapper.create(...) 호출 전에 실행해야 합니다.