[Chartjs]-Cannot get react-chartjs to update

by

1👍

✅

Your PolarPlot component is not rendered unless you explicitly change the state. Your chartData is not part of the component state. So assigning a new array to that variable does nothing more than that. Move this chartData to the component state. Then, whenever you update this state variable you are going to force the re-render. Something like this:

var PolarPlot = React.createClass ({
  componentWillMount: function () {
      FilterStore.addChangeListener  (this._onChange);
  },

  getInitialState: function() {
    return {chartData: chartData};
  },

  _onChange: function () {
    console.log("time to update")
    this.setState({
      chartData: [{
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
      }]
    });
  },

  render: function () {
    return (
      <PolarAreaChart id="polarChart" data={this.state.chartData} options={chartOptions} redraw/>
    );
  }
});

If you want to know more about how components rendering reacts to state changes check Reactive state section from the React Tutorial.

Leave a comment