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>
);
}
}
- Chartjs-How to get certain text from json object value
- Chartjs-Chart.js different doughnut thickness in a mixed chart
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.
Source:stackexchange.com