Search code examples
javascriptreactjsrecharts

Why is my bar graph not stretching according to the data i received?

This is my output

Why does my Bar Graph is not stretching even though I'm sending the data properly? I tried to change the height of it, but the maximum value shows is only 100, but when I hover the mouse to specific bar, it shows different value?

{id: '26', name: 'CAHS 2022-2023 1st Semester', coursecount: '112'},
{id: '32', name: 'CASE 2022-2023 1st Semester', coursecount: '326'},
{id: '36', name: 'CBMA 2022-2023 1st Semester', coursecount: '204'},
{id: '42', name: 'CEIS 2022-2023 1st Semester', coursecount: '114'},
{id: '47', name: 'CHTM 2022-2023 1st Semester', coursecount: '153'},
{id: '52', name: 'CMT 2022-2023 1st Semester', coursecount: '170'},
{id: '71', name: 'SHS 2022-2023 1st Semester', coursecount: '98'}

This is my Barchart.js

const BarGraphUsageStudents = ({data}) => {

   return (
    <ResponsiveContainer width="100%" height="100%">
    <BarChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5,
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="coursecount" fill="#69e141" />
    </BarChart>
  </ResponsiveContainer>
    );
}
Solution

  • You are using the string value in the coursecount.

    Try to change all your coursecount to the number type or if you can't, you can write a map on your data like this:

    data={data.map(item => ({ ...item, coursecount: Number(item.coursecount) }))}

    Online demo