Vue chartjs is not rendering from API - vuejs2

Question

I have an API that gives me data about certain things. With that data, I would like to render my chart dynamically. However, when I use that API in the created() segment, it does not get rendered. But if I shift my data to hardcode it in the data() segment, it works. May I seek advice here?
export default {
extends: Line,
data() {
return {
lineChartOptions: {
maintainAspectRatio: false,
responsive: true,
scales: { yAxes: [{ ticks: { beginAtZero: true }, gridLines: { display: true } }], xAxes: [{ gridLines: { display: false } }] },
legend: {
display: true,
},
},
lineChartData: [],
};
},
created() {
axios
.get("someurl")
.then((response) => {
let responseData = response.data;
let lineDataset = [];
for (let i = 0; i < responseData.pidList.length; i++) {
lineDataset.push({
label: responseData.pidList[i],
backgroundColor: "#2554FF",
data: 2000,
});
}
console.log(lineDataset);
this.lineChartData = { labels: ["2020", "2021"], datasets: { lineDataset } };
})
.catch(function(error) {
console.log(error);
});
},
mounted() {
this.renderChart(this.lineChartData, this.lineChartOptions);
},
};

Answer 1

vue-chartjs does not live update by default, this is because chart.js does not support it. To make it live update you will need to add the reactiveProp mixin as described in the documentation: https://vue-chartjs.org/guide/#updating-charts