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'],
  zoom: true,
  legend: {
    position: 'top'
  },
  tooltip: {
    enabled: true
  }
});
Copy

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

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

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

설정 옵션

옵션	타입	기본값	설명
errorLogging	boolean	true	에러 로그 출력 여부
silentMode	boolean	true	에러 발생 시 예외를 던지지 않고 처리
defaultColor	string[]	내부 기본 팔레트	차트 전역 기본 색상 배열
zoom	boolean | object	false	line, bar, bubble 차트에 전역 zoom 기본값 적용
legend	object	차트 기본값 사용	차트 전역 legend 기본 옵션 적용
tooltip	object	차트 기본값 사용	차트 전역 tooltip 기본 옵션 적용

변경기록

CHANGELOG.md 파일을 참조하세요.

주의사항

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