문서 › 프레임워크와 서버

React

React 컴포넌트로 82chart 쓰기.

npm i @82chart/core @82chart/react

import { Chart82 } from '@82chart/react';
import '@82chart/core/styles.css';

const data = {
  labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
  series: [{ name: '매출', data: [32000000, 41000000, 38500000, 52000000, 61000000, 58000000] }],
};

export function SalesChart() {
  return (
    <Chart82
      type="bar"
      data={data}
      options={{ title: '월별 매출', unit: '원' }}
      onClick={(point) => console.log(point)}
    />
  );
}

<Chart82 type data options theme onClick onReady />. options 는 type·data 를 뺀 나머지 옵션입니다.
data 는 객체가 바뀌었을 때(새 객체) 다시 그립니다. 같은 배열을 고쳐 쓰지 말고 새로 만들어 넘기세요.
options 는 키 하나하나를 비교해서 바뀐 것만 setOptions 로 반영합니다.
ref 로 차트 인스턴스를 받습니다. 마운트된 뒤에 만들어지므로 Next.js 같은 SSR에서도 안전합니다.

ref 로 내보내기

import { useRef } from 'react';
import { Chart82, type Chart } from '@82chart/react';

function Report({ data }) {
  const ref = useRef<Chart>(null);
  return (
    <>
      <Chart82 ref={ref} type="line" data={data} />
      <button onClick={() => ref.current?.download('png', 'report')}>PNG</button>
    </>
  );
}