Question 73946 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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>
    );
}
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    the problem is due to width and height given in ResponsiveContainer, they are 100% of parent and thus it is affected by the parent container, also the string type of coursecount.

    add a div above ResponsiveContainer and give height to that div, by doing this , your chart will be responsive as well (try resizing), and change type of coursecount

    const BarGraphUsageStudents = ({data}) => {

   return (
 <div style={{"height":"500px"}}>
    <ResponsiveContainer width="100%" height="100%">
    <BarChart
      width={500}
      height={300}
      data={data.map(item => ({ ...item, coursecount: 
         Number(item.coursecount) }))}        
      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>
</div>  
    );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search