CODEWITHSUNDEEP
javascriptreactjsreact-chartjs
Zodiac
Zodiac

Reputation: 123

wrong output while building population chart in react

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.

population changing over year

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?

Upvotes: 0

Views: 272

Answers (1)

Kamil Janowski
Kamil Janowski

Reputation: 2025

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

Upvotes: 1

Related Questions