Chartjs-React – render Chart.js chart based on user selection, after Ajax returns JSON

by

0👍

✅

For your first trial, try to remove curly brackets at chartToBeDisplayed.

{this.state.isLoaded ? chartToBeDisplayed : <div>Loading...</div>}

As long as the grammar of your Chart is correct, it should work.

For your second trial.

Chart.js only set state at initial mount.

Thus, when you update state on App.js and pass new props – chartType to Chart.js, you need to update the local state.

Try to add componentWillReceiveProps at Chart.js component.

class Chart extends Component {
  constructor(props) {
    ...
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.chartType !== this.state.chartType) {
      this.setState({chartType: nextProps.chartType})
    }
  }
}

Updated

For preventing misunderstand, Chart.js mentioned above means the Chart.js file posted on question.

Leave a comment