Unable to acess API data in React-VictoryJs

i am unable to acess API data in Victoryjs charts for some reason, the API is working correctly as if i output the data outside of the chart it shows the data but i cant get it to work inside the chart. My API is outputting data as 2 arrays inside a JSON object. Below is my code, also FYI it isnt throwing any errors.

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          data : [],
          dates: []
        };
    }
    componentDidMount() {
        axios
             .get("http://localhost:8000/api")
             .then(res => this.setState({data:res.data.chartdata, dates:res.data.labels}))
    }  
    render() {
      return (
        <div>
          <h1>Victory Tutorial</h1>
          <VictoryLine data={[{x:this.state.dates, y:this.state.data}]} />          
        </div>
      );
    }
}

export default Main;

90 thoughts on “Unable to acess API data in React-VictoryJs”

Leave a Comment