GradeDistributionChart.js

import React from "react";
import {FakeData} from "../utils/Data";
import { Chart, registerables } from 'chart.js';
import { Bar } from "react-chartjs-2";
Chart.register(...registerables);

function GradeDistributionChart() {

    const chartData = {
        labels: FakeData.map((data) => data.grade),
        datasets: [{
            label: "Grade Distribution Dataset",
            data: FakeData.map((data) => data.count),
            //add customization options here
            backgroundColor: [
                "#ADD8E6",
                "#3CB371"
            ],
        }]
    };

    return (
        <div className="chart-container" style={{width: 50 + 'vw', padding: 50 + 'px'}}>
            <h2 style={{ textAlign: "center" }}>Grade Distribution</h2>
            <Bar
                data={chartData}
                options={{
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: "Count",
                            },
                            beginAtZero: true
                        },
                        x: {
                            title: {
                                display: true,
                                text: "Grade",
                            },
                        }
                },
                    plugins: {
                        legend: {display: false}
                    }
                }}
            />
        </div>
    );
}
export default GradeDistributionChart;