Chartjs-React and Chartjs not updating from dynamic data through api

1👍

You can attach the map referance to the class and once data changes use this referance. Modified your code.

class CountByUserGraph extends React.Component {

  this.massPopChart;

  constructor() {
    super();
    this.state = { selectedOption: "A" };
  }

  componentDidMount() {
    this.makeApiCall();
  }

  makeApiCall = () => {
    countByUserGraph(this.state.selectedOption) // API CALL
      .then(response => {
        // recieves data
        this.getChartData(data);
      })
      .catch(err => console.log(err));
  };
  getChartData = data => {
    let myChart = document.getElementById("myChart0").getContext("2d");
    const CountValue = data.map(a => a.countValue);
    const CountMonth = data.map(a => a.month);
    var data = {
      labels: CountMonth,
      datasets: [
        {
          label: "Count",
          data: CountValue
        }
      ]
    };

    var option = {
      responsive: true
      // Options
    };

    if(this.massPopChart){
       massPopChart.data = data;
       //massPopChart.config.data = data; //use this if above code does not work
       massPopChart.update();
    }
    else{
       this.massPopChart = new Chart.Line(myChart, { data: data, options: option });
    } 
  };

  handleOptionChange = changeEvent => {
    this.setState({ selectedOption: changeEvent.target.value }, function() {
      this.makeApiCall();
    });
  };

  render() {
    return (
      <div>
        <form className="graph-filter">
          <div>
            <input
              type="radio"
              id="A"
              name="A"
              checked={this.state.selectedOption === "A"}
              onClick={this.handleOptionChange}
              value="A"
            />
            <label htmlFor="A">A</label>
          </div>

          <div>
            <input
              type="radio"
              id="B"
              name="B"
              checked={this.state.selectedOption === "B"}
              onClick={this.handleOptionChange}
              value="B"
            />
            <label htmlFor="B">B</label>
          </div>
        </form>
        <canvas id="myChart0"></canvas>
      </div>
    );
  }
}

0👍

you can call the update function, see the docs here

so in your codesnippet you can update the chart as shown below

let massPopChart = new Chart.Line(myChart, { data: data, options: option });
// for example 
massPopChart.options.title.text = 'new title';
massPopChart.update()

similar way you can update the data also.

Leave a comment