[에러해결] Error: "point" is not a registered element.

✔️ 필요성

react에서 Chart.js wrapper인 react-chartjs-2을 사용하여 멀티타입 차트를 그리려고 한다. 아래에 예제가 나와있어서 그대로 가져다가 써보았는데 에러가 난다.

 

https://react-chartjs-2.js.org/examples/multitype-chart

Multitype Chart | react-chartjs-2

아래처럼 바 차트와 라인차트를 동시에 그리는 멀티타입 차트를 그리려고 한다

 

✔️ 에러 상황

아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 경우가 생길 수 있다. 나처럼...

 

 

 

✔️ 문제 해결

chart.js에서 PointElement를 import해서 ChartJS.register해주면 된다!

import { Chart } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  PointElement,
} from "chart.js";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  PointElement, //요기
  LineElement,
  Title,
  Tooltip,
  Legend,
  annotationPlugin
);