GradeDistributionChart.js

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;