CODEWITHSUNDEEP
reactjsrecharts
kinnu
kinnu

Reputation: 388

Bar Charts are not getting displayed in React js using recharts

I am trying to build a Bar Chart using Recharts in React js. I am fetching the data from an API using fetch call and converting it to array.But when it displays the barCharts it is coming blank.

Can any one help me where I am going wrong

var data1=[];



class BarChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date(),
      endDate: new Date(),
      count: false,
      formsubmit: false,
      formsubmit1: false,
      modalShow: false,
      items: [],
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(date) {
    this.setState({
      startDate: date
    });
  }
   handleClick1 = e => {
    e.preventDefault();
     var URL =
       " http://localhost:8080/fetchdata;
    this.setState({ formsubmit: true });
    console.log(URL);
    fetch(URL, {
    method: "GET",
     })
     .then(res => res.json()).then(data=>
       {
     console.log("Response Success!!")
    this.setState({items:data});
    data1=this.state.items;
    console.log(this.state.items);
    }) 
  };  

  render() {

    return (
      <div style={{ marginTop: 40 }}>


              <Button
                onClick={this.handleClick1}
                style={{
                  background:
                    "linear-gradient(to left bottom,rgb(31, 130, 167), rgb(161,215,232))",
                  fontSize: "small",
                  marginLeft: "20%"
                }}
              >
                VIEW METRICS
              </Button>
          </div>
               <div>
            {this.state.formsubmit && (
              <BarChart width={500} height={300} data={data1}>
                <XAxis dataKey="Total" />
                <YAxis />
                <Tooltip cursor={false} />
                <Legend />
                <Bar dataKey="Success" stackId="a" fill="#8884d8" label />
                <Bar
                  dataKey="Failure"
                  onClick={this.handleClick}
                  stackId="a"
                  fill="#82ca9d"
                  label
                />
              </BarChart>
            )}
          </div>

    );
  }
}
export default withStyles(styles)(BarChart);`

I have checked the console log.It is displaying data in array.enter image description here

Can anyone please suggest where I am going wrong?

Upvotes: 1

Views: 6934

Answers (3)

Sultan Aslam
Sultan Aslam

Reputation: 6238

The main issue is onAnimationEnd callback (use in react-smooth library) not being called. To fix this as a workaround, simply pass isAnimationActive={false} prop to Bar component

Upvotes: 3

YarinDekel
YarinDekel

Reputation: 300

You are defining the data obj as a variable, you need to access the state so that when it's changed, the component will re-render. Beside it's an async request your first data initialize is empty so the bar chart is getting undefined.

Change to:

data={this.state.items}

Upvotes: 1

Amir-Mousavi
Amir-Mousavi

Reputation: 4593

<BarChart width={500} height={300} data={data1}> data1 is initially empty, and is not in state. so when you fill it with data React does not understand that it is changed therefore no re-render is happening <BarChart width={500} height={300} data={this.state.items}> should work, if not make function async and use await

Upvotes: 1

Related Questions