使用chart.js时如何解决chart_js.Chart.register问题

Question

Am developing a user dashboard application using Next.js. I query my client from a node and MongoDB server. I need to load my graphs using chart.js. But when I run the code I experience this error. TypeError: chart_js.Chart.register is not a function. Here is the code snippet:

import {Chart as ChartJS} from 'chart.js';
import { Bar } from 'react-chartjs-2';

import React, { useEffect, useReducer } from 'react';
import Layout from '../../components/Layout';
import { getError } from '../../utils/error';

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

Answer 1

2 Things, you are not importing all the elements you are trying to register and since Chart.register is not a function I suspect you are using V2 of Chart.js which is non treeshakable. So you can't and don't have to use register to show the charts unless you are going to upgrade to V3 and use treeshaking

If you want to register any plugins in V2 you need to register them on the plugins of the chart like so:

Chart.plugins.register(plugins);