[Chartjs]-Deleting and recreating an element with React

by

2👍

✅

In React, you want to change the view every time the props or state change. If you’re using a DOM manipulation library, such as Chart.js, this is where the React lifecycle methods come in handy.

https://facebook.github.io/react/docs/component-specs.html

You can use componentWillUpdate or componentDidUpdate (depending on what suits) to compare the next state to the previous state.

componentWillUpdate(nextProps, nextState) {
    /* Optionally include logic comparing nextProps or nextState
     * to this.props or this.state
     */
    this.lineChart.clear();
}

Just make sure that it’s props/state changes that drive the changes in the Chart.

I don’t know much about this apparent Chart.js bug. But if you do need to re-render the canvas element each time, I would suggest placing a key attribute on the canvas element.

<canvas key={this.uniqueKey()} id="lineChart" width="688" height="286"></canvas>

Quite what this.uniqueKey() produces hard to say. But it needs to be different every time the props or state change. And only resort this if simpler methods like Chart#clear() (or possibly Chart#destroy()) fail.

0👍

Try this –

var LineChart = React.createClass({
  render: function() {
    return (
      <div id="lineHolder" className="graphHolder">
        <h2 className="sectionHeader">Earnings per day</h2>
        <canvas ref="lineChart" key={this.state.canvasUpdateToggle} width="688" height="286"></canvas>
      </div>
    );
  },
  ctx: {},
  lineChart: {},
  getInitialState:function(){
    return {canvasUpdateToggle:"0"};
  },
  componentDidMount: function() {
    this.drawChart();
  },
  componentDidUpdate: function() {
    this.drawChart();
  },
  componentWillReceiveProps:function(){
    var canvasUpdateToggle = this.state.canvasUpdateToggle == 0? 1: 0;
    this.setState({"canvasUpdateToggle":canvasUpdateToggle});
  },
  drawChart: function() {
    var lineData = {
      labels: this.props.dates,
      datasets: [{
        label: "Earnings",
        fillColor: "rgba(151,187,205,0.2)",
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
        data: this.props.earnings,
      }]
    }
    this.ctx = this.refs.lineChart.getContext("2d");
    this.lineChart = new Chart(this.ctx).Line(lineData);
  }
});

Leave a comment