React + chart.js

chart.js도 편리하지만 React와 함께 사용하면 state와 함께 좀 더 동적인 차트를 그릴 수 있습니다.

솔직히 편리하게 Reactive한 구성을 할 수 있기 때문에 React 쓰는 거죠.

yarn add chart.js
yarn add @types/chart.js // definitely type 존재. ts 사용하면 추가 설치 권장

 

여기서도 D3.js, quill.js에서 사용했던 것과 같은 문제에 봉착해야 합니다.

직접 Dom을 다뤄야 하는 거죠. 이럴 때 쓰라고 있는게 useRef이니 다음과 같이 사용해주면 됩니다.

 

한번 렌더 된 후에 context를 잡아줘야 하니 useEffect 문 내에서 그래프를 그려주면 되겠습니다.

import React, { useRef, useEffect } from "react";
import Chart from "chart.js";
import "./App.css";

function App() {
  const canvasDom = useRef(null);
  useEffect(() => {
    const ctx = canvasDom.current.getContext("2d");
    console.log(ctx);

    new Chart(ctx, {
      type: "line",
      data: {
        labels: ["조", "권", "김"],
        datasets: [
          {
            label: "자금력",
            data: [550, 30, 240],
          },
        ],
      },
    });
  }, []);

  return (
    <div>
      <canvas ref={canvasDom}></canvas>
    </div>
  );
}

export default App;

 

 

 

react-chartjs-2와 같은 별도 패키지도 만들어진 것 같은데, 저는 사용하지 않겠습니다.

quill때도 react-quill 때문에 고생해서, 가급적이면 원본 패키지를 이용하는 것이 좋다는 편견? 이 생겼기 때문입니다.

 

github.com/reactchartjs/react-chartjs-2

reactchartjs/react-chartjs-2