stz-chart-maker

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

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 { useMemo, useState } from 'react';
import { ChartWrapper } from 'stz-chart-maker';
import { Chart } from 'react-chartjs-2';

const labels = ['A', 'B', 'C'];
const datasets = [{ label: 'Sales', data: [10, 20, 30] }];

const [chart] = useState(() =>
  ChartWrapper.create('line', labels, datasets)
    .addZoom(true)
    .addDataLabels(true)
);

const config = useMemo(() => chart.build('sales'), [chart]);

return <Chart {...config} />;
Copy

build()는 호출할 때마다 새 설정 객체를 만들고, id를 생략하면 내부적으로 랜덤 _chartId를 생성합니다.
그래서 React에서는 return <Chart {...chart.build()} />;보다 useMemo(() => chart.build('sales'), [chart])처럼 안정적인 id와 함께 메모이즈해서 쓰는 편이 안전합니다.

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

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

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

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

설정 옵션

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

주의사항

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