Why do I get this mistake with React-chartjs-2

Question

import React, { useState } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart as `ChartJS`, LineElement, CategoryScale, LinearScale, PointElement, Legend, Tooltip, Title } from 'chart.js';

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

function LineChart() {
const labels = ['1', '2', '3'];
const [data, setData] = useState({
label: labels,
datasets: [{
  label: 'Data of the selected period',
  data: [3, 6, 9],
  backgroundColor: [
  'green'
],
  borderColor: [
  'grey'
],
  pointBorderColor: [
  'green'
],
  borderWidth: 1,
  fill: true,
  tension: 0.4
}
]

});

const options = {
plugins: {
legend: true
},
scales: {
y: {
min: 0,
max: 16
}
}
};
return <Line data={data} option={options} />;
}
export default LineChart;

It's my first time when I work with TS and chart.js-2. Got a mistake, that can't resolve. I have installed react-chartjs-2.. Mistake: ( https://i.stack.imgur.com/T5X5H.png ) what is the problem?

Answer 1

The issue is that you wrapped ChartJS in back ticks in your import which makes it not work, your import statement should be:

import { Chart as ChartJS, LineElement, CategoryScale, LinearScale, PointElement, Legend, Tooltip, Title } from 'chart.js';