Plot bar graph in reactjs

Question

I am learning reactjs and I'm trying to plot bar graph. So I'm trying to plot population race graph which change over the time and looks like this. Population race bar chart

For plotting graph I am using chart-race-react. But it seems like I'm doing something wrong in my code.

My code:

import React, { Component } from 'react';
import BarChart from 'chart-race-react';

import './App.css';
const API_URL = 'https://example.json';

const randomColor = () => {
  return `rgb(${255 * Math.random()}, ${255 * Math.random()}, ${255})`;
}

class App extends Component {
 constructor(props) {
     super(props);
     this.state = {
     countries: []
   }
 }

componentDidMount() {

fetch(API_URL)
.then(v => v.json())
.then(array => {
  const dataForVisualisation = {};

  array.forEach(element => {
      const countryName = element['Country Name'];
      if (!dataForVisualisation[countryName]) {
         dataForVisualisation[countryName] = [];
      }
      dataForVisualisation[countryName].push(element.Value);
  });

  this.setState({countries: dataForVisualisation});
})

}

render() {

 return (
    <div style={{width: "500px"}}>

     <BarChart 
      start={true}
      data = {this.state.countries}
      len = {this.state.countries[Object.keys(this.state.countries)[0]].length}
      keys = {Object.keys(this.state.countries)}
      timeout={400}
      delay={100}
      colors = {Object.keys(this.state.countries).reduce((res, item) => ({ 
        ...res, 
        ...{ [item]: randomColor() } 
    }), {})}
      labels = {Object.keys(this.state.countries).reduce((res, item, idx) => {
        return{
        ...res, 
        ...{[item]: (
          <div style={{textAlign:"center",}}>
            <div>{item}</div>
          </div>
          )}
      }}, {})}
      timeline = {Array(20).fill(0).map((itm, idx) => idx + 1)}
      timelineStyle={{
        textAlign: "center",
        fontSize: "50px",
        color: "rgb(148, 148, 148)",
        marginBottom: "100px"
      }}
      textBoxStyle={{
        textAlign: "right",
        color: "rgb(133, 131, 131)",
        fontSize: "30px",
      }}
      barStyle={{
        height: "60px",
        marginTop: "10px",
        borderRadius: "10px",
      }}
      width={[15, 75, 10]}

      maxItems = {this.state.countries.length}

    />

  </div>
    );
  }
}
export default App;

I'm encountering TypeError: this.state.countries[Object.keys(...)[0]] is undefined error because my data is undefined here. How should I change my code to make my output as shown in gif? Is there any other library for doing this ?

Khabir · Accepted Answer · 2020-06-13 17:26:06Z

1

I found an issue on your code like in len property of the BarChart that gets the error Cannot read property 'length' of undefined. After I used null checking with question mark, I am not getting any error but printing 1 to 20. I am not sure it helps you or not. May be after changing that, you will get it solved.

len={this.state.countries[Object.keys(this.state.countries)[0]].length}

replaced by

len={this.state.countries[Object.keys(this.state.countries)[0]]?.length}

answered Jun 13, 2020 at 17:26

Khabir

5,8781 gold badge26 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kelte Over a year ago

Thanks @Khabir but this did not solve all my problem but a part of it definitely.

Khabir Over a year ago

You are welcome, I tried a lot to show the graph but was unable. you provided an code link on other answer where it includes conditional statement like this.state.countries.length > 0 but this.state.countries is not an array, it is an object. you must remove that condition. Please check this code link: codesandbox.io/s/unruffled-kepler-ecq0d

kelte Over a year ago

Thanks for trying @Khabir.I have got this output at some point but again edited it to get expected output. If you get any idea how this graph can be plotted please ping here

Florian Motteau · Accepted Answer · 2020-06-13 16:52:10Z

0

You should just wait until countries is filled before trying to render anything. You can for example render BarChart component only if countries array has at least one element :

[...]
{this.state.countries.length > 0 && <BarChart 
  start={true}
  data = {this.state.countries}
  len = {this.state.countries[Object.keys(this.state.countries)[0]].length}
  keys = {Object.keys(this.state.countries)}
  timeout={400}
  delay={100}
  colors = {Object.keys(this.state.countries).reduce((res, item) => ({ 
    ...res, 
    ...{ [item]: randomColor() } 
}), {})}
  labels = {Object.keys(this.state.countries).reduce((res, item, idx) => {
    return{
    ...res, 
    ...{[item]: (
      <div style={{textAlign:"center",}}>
        <div>{item}</div>
      </div>
      )}
  }}, {})}
  timeline = {Array(20).fill(0).map((itm, idx) => idx + 1)}
  timelineStyle={{
    textAlign: "center",
    fontSize: "50px",
    color: "rgb(148, 148, 148)",
    marginBottom: "100px"
  }}
  textBoxStyle={{
    textAlign: "right",
    color: "rgb(133, 131, 131)",
    fontSize: "30px",
  }}
  barStyle={{
    height: "60px",
    marginTop: "10px",
    borderRadius: "10px",
  }}
  width={[15, 75, 10]}

  maxItems = {this.state.countries.length}

/>}

{this.state.countries.length === 0 && <span>Loading...</span>}
[...]

Note the conditional rendering syntax.

answered Jun 13, 2020 at 16:52

Florian Motteau

3,7241 gold badge27 silver badges43 bronze badges

7 Comments

kelte Over a year ago

did this work and output was as given in gif ? @Florian

kelte Over a year ago

I'm getting a blank screen after loading

Florian Motteau Over a year ago

I let you test my suggestion and see if it suits your needs. I did not setup your use case.

Florian Motteau Over a year ago

You can setup a code sandbox, it would be simplier to help (codesandbox.io)

kelte Over a year ago

can you test it from your end if possible

|

Collectives™ on Stack Overflow

Plot bar graph in reactjs

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related