stz-chart-maker

using npm :

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

api Docs

📚 API 문서

example

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

return (

  

);
Copy

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');

;
Copy

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']
}
Copy

설정 옵션

설정 없이 사용하기

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

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

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

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

autoRegister vs registerTypes

모든 타입 자동 등록:

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

특정 타입만 등록:

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