Issue in implementing ChartJS in my new assignment of ReactJS App, please let me know where I am wrong

Question

I want to upload a chart in my react app but when I use this Barchar.jsx component (have used js nothing changed) it is showing following errors in console(are in image.)

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

ChartJS.register(BarElement)

const BarChart = () => {

    var data = {
        labels: ['RCB', 'MI', 'RR', 'SRH', 'CSK', 'KXIP', 'DD', 'DCH', 'GL', 'RPS', 'KKR'],
        datasets: [{
            label: '# of toss wins',
            data: [70, 85, 63, 35, 66, 68, 72, 43, 15, 6, 78],
            backgroungColor: ['red', 'lightblue', 'pink', 'orange', 'yellow', 'gold', 'blue', 'black', 'gold', 'voilet', 'purple' ],
            borderWidth: 1
        }]
    };

    var options = {
        maintainAspectRatio: false,
        scales: {
            y:{
                beginAtZero: true
            }
        },        
    };

    return (
        <div>
            <Bar
            
                data= {data} 
                height={400}
                width={600}
                options={options}
            />
        </div>
    )

};

export default BarChart ;

Answer 1

Its because you try to use treeshaking but import and register only the element of the bar while chart.js needs a lot more.

For ease of use you are best of to change

import {Chart as ChartJS, BarElement } from 'chart.js';

ChartJS.register(BarElement)

into:

import 'chart.js/auto'

If you really want to use treeshaking you should look at the docs and import and register everything you are using: https://www.chartjs.org/docs/3.7.1/getting-started/integration.html#bundlers-webpack-rollup-etc

Answer 2

SO BASSICALLY MISTAKE WHICH I DID WAS I DIDN'T IMPORT  THIS BARCHART IN APPJS.CORRECT CCODE WILL BE LIKE THIS (FOR BARCHART.JSX) YOU CAN CHANGE IN IT MANY THINGS.



import React from "react";
import { Bar } from "react-chartjs-2";
import 'chart.js/auto'


const BarChart =() => {
    return <div>
        <Bar 
            options={{
                
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }}
            data ={{
                labels: ['RCB', 'MI', 'RR', 'SRH', 'CSK', 'KXIP', 'DD', 'DCH', 'GL', 'RPS', 'KKR'],
                datasets: [{
                    label: '# of  toss wins',
                    data: [70, 85, 63, 35, 66, 68, 72, 43, 15, 6, 78],
                    backgroundColor: ['red', 'Blue', '#ff64dc', '#fc7404', 'yellow', 'red', '#000080', 'silver', 'gold', '#9400d3', 'purple' ],
                    borderColor:['black'],
                    borderWidth: 1
                },
                {
                label: '# of match wins',
                data: [73, 92, 63, 42, 79, 70, 62, 29, 13, 10, 77],
                backgroundColor: ['#C9920E', 'Blue', '#ff64dc', '#fc7404', 'yellow', 'lightgrey', '#000080', 'silver', 'gold', '#9400d3', 'purple' ],
                borderColor:['black'],
                borderWidth: 1
                }
            ]
                
            }}

        /></div>
};  

export default BarChart ;