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

by

0👍

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

0👍

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 ;

Leave a comment