wrong output while building population chart in react

Question

I am very new to react and I'm trying to fetch population data from API using Axios and display population of world-changing overtime. Something like this.

I am trying to build this using chart-race-react. There is only one example in the repository so I tried to take a hint from that example.

I tried:

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

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

class App extends Component {
  state = {
    countries: []
  }

componentDidMount() {
axios.get(API_URL)
.then(response => response.data)
.then((data) => {
  this.setState({ countries: data })
  console.log(this.state.countries)
 })
}

  render() {

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

    start={true}
    data = {this.state.countries}
    len = {this.state.countries.length}
    timeout={400}
    delay={100}
    colors = "rgb(133, 131, 131)"
    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 am getting an output where a number appears in browser which goes from 1 to 20. How can I make my app look exactly like the above gif? what am I doing wrong here?

1. You cannot just post 1 line of a multi-line error and hope for help. Please post the entire stack trace. 2. Clearly wherever the code originates from, it's not present in the code you posted, since you don't even mention the variable `colors`. This kinda brings me back to "post the full stack trace and all of the relevant code" — Kamil Janowski, Jun 12 '20 at 05:15
I'm sorry if I was not clear. So basically I am using this [npm package](https://www.npmjs.com/package/chart-race-react) package. Please visit and see if you can help — Zodiac, Jun 12 '20 at 05:20
good choice. The NPM package looks nice, but you still need to post the full stack trace. Simple `_this.props.colors is undefined` is not enough. You still cannot tell from this, what line of code cause the error and if the error is thrown by the library, what line of your code was last triggered before the error happened. The stack trace contains this sort of details and I'm assuming it is present in your logs... or is `_this.props.colors is undefined` the whole error and there's literally nothing more in the console logs? — Kamil Janowski, Jun 12 '20 at 05:23

score 1 · Answer 1 · answered Jun 12 '20 at 05:28

1

There is no property "color". The documentation mentions the property "colors" which is an object. In your case the colors object would have the keys representing the countries (just like in your "data") and values representing the colors

answered Jun 12 '20 at 05:28

Kamil Janowski

1,872
2
21
43

Thanks but still my output is not like `gif` – Zodiac Jun 12 '20 at 05:31
well... that's another problem. Let's fix one at a time, because each problem might be the reason for the next one. So do you still have the color problem after fixing the colors attribute? do you see any other errors in the logs? – Kamil Janowski Jun 12 '20 at 05:35
no error i'm getting output with number going from 1 -> 20 – Zodiac Jun 12 '20 at 05:37
you really have to learn to be more specific. A single white character that you don't even see might sometimes make a difference. Don't describe your output. Copy-paste it. For starters, I can see that your `len` is probably wrong. Your data is supposed to be an object with arrays, each of length equal to 'len'. So if len is 2, then data should be {UK: [1,2]}. If this is what your data actually looks though, then your `len = {this.state.countries.length}` is currently undefined. – Kamil Janowski Jun 12 '20 at 05:44
Also your timeline has to be of length `len`. I would generally recommend you to look at the docs again and check all of your attributes and the actual values you're passing to them, because clearly, many of them are messed up – Kamil Janowski Jun 12 '20 at 05:45
always read the documentation for all the inputs you're using. Always either print your inputs somewhere or run your app with a debugger to see that the values you're passing as inputs are actually what you expect them to be. Only when the inputs are correct and match the description from the documentation, should you consider asking for help :P I understand that as a beginner you still don't have much experience interpreting the errors, but simply reading the error message and comparing it with the docs, is all the other devs can do – Kamil Janowski Jun 12 '20 at 05:52
then there's also another story of selecting the right npm module. You picked a module that quite clearly is used by absolutely nobody but the creator of the module himself. At this rate it's quite likely that the module will have bugs and might not work with your slightly different setup out of the box. – Kamil Janowski Jun 12 '20 at 05:55
very true. I totally get it. Is there any other library through which I can achieve this. The documentation is not clear for this library – Zodiac Jun 12 '20 at 05:57
actually I cannot see any better tool for this. I suppose it's not a very popular concept in the world of React at least o_o Well... perhaps this one will still work, but you do have to provide the right inputs and from the posted example you're clearly putting the wrong values to parameters. Starting with the fact that either your data does not contain an object, like it should according to the documentation, or it does contain an expected object, but `len` does not contain anything, because {}.length is not a thing. Also your timeline clearly contains a wrong value. – Kamil Janowski Jun 12 '20 at 08:48
So let's start with something simple. What's currently the content of your `this.state.countries` ? – Kamil Janowski Jun 12 '20 at 08:49
all the county's name with the population by the year. something like this : ` { "Country Name": "Afghanistan", "Country Code": "AFG", "Year": 1960, "Value": 8996973 }, { "Country Name": "Afghanistan", "Country Code": "AFG", "Year": 1961, "Value": 9169410 }, and other counties name with year` – Zodiac Jun 12 '20 at 10:08
so you can see how this is already different from the documentation that says "data Object An object with keys being the data field name and value being Array data. data[key].length should be equal to len." You have a good example of what to put there in their repo: https://github.com/Mckinsey666/chart-race-react/blob/master/examples/demo.js – Kamil Janowski Jun 12 '20 at 10:30

wrong output while building population chart in react

1 Answers1