stz-chart-maker

Chart.js 기반의 차트 생성 도구

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

프로젝트 루트에 설정 파일을 생성하여 차트 동작을 커스터마이징할 수 있습니다.

설정 파일 위치

다음 중 하나의 위치에 설정 파일을 생성하세요:

stz.config.js (권장)
.stzrc.js
src/stz.config.js
src/config/stz.config.js
config/stz.config.js

설정 예시

// stz.config.js
module.exports = {
  // 에러 로깅 활성화/비활성화
  errorLogging: true,

  // 에러 발생 시 무시 (silent mode)
  silentMode: false,

  // 차트 기본 색상 커스터마이징
  defaultColor: [
    '#FF6B6B',
    '#4ECDC4',
    '#45B7D1',
    '#FFA07A',
    '#98D8C8',
    '#F7DC6F'
  ],

  // 모든 차트 타입 자동 등록
  autoRegister: true,

  // 또는 특정 타입만 선택적으로 등록
  // registerTypes: ['bar', 'line', 'doughnut']
}

설정 옵션

옵션	타입	기본값	설명
`errorLogging`	`boolean`	`false`	에러 로그 출력 여부
`silentMode`	`boolean`	`false`	에러 발생 시 예외를 무시하고 계속 실행
`defaultColor`	`string[]`	기본 색상 팔레트	차트에 사용할 기본 색상 배열
`autoRegister`	`boolean`	`false`	모든 차트 타입 자동 등록 (bar, line, bubble, doughnut)
`registerTypes`	`ChartType[]`	`[]`	특정 차트 타입만 선택적으로 등록

설정 없이 사용하기

설정 파일이 없어도 라이브러리는 정상 작동합니다. 단, 차트를 사용하기 전에 수동으로 등록해야 합니다:

import { ChartWrapper, BarChartWrapper, LineChartWrapper } from 'stz-chart-maker';

// 차트 타입 등록
ChartWrapper.register('bar', BarChartWrapper);
ChartWrapper.register('line', LineChartWrapper);

// 이제 사용 가능
const chart = ChartWrapper.create('bar', labels, datasets);

autoRegister vs registerTypes

모든 타입 자동 등록:

module.exports = {
  autoRegister: true  // bar, line, bubble, doughnut 모두 등록
}

특정 타입만 등록:

module.exports = {
  registerTypes: ['bar', 'line']  // bar와 line만 등록
}