Vue 3 Chartjs Not Updating Data Dynamically from API
I am currently working on Vue 3 and I am new to it. I added a chart using the official Chart.js documentation, and initially, everything rendered correctly when I populated the chart with data from an API. However, when I tried to update the data field to another set of data, the chart was not rendering despite receiving the updated data.
Below is the JSON data retrieved from the API:
[{"ward":1,"maleCount":3,"femaleCount":1,"otherCount":1,"disableCount":0},
{"ward":2,"maleCount":0,"femaleCount":0,"otherCount":0,"disableCount":0},
{"ward":3,"maleCount":0,"femaleCount":0,"otherCount":0,"disableCount":0},
{"ward":4,"maleCount":0,"femaleCount":0,"otherCount":0,"disableCount":0},
This is how the API is called in my code:
mounted() {
this.getData();
},
method:{
getData() {
axios
.get("api/v1/household/dashboard/getDetailByGharMuli")
.then((res) => {
// Handling the retrieved data
})
.catch((err) => {
console.error(err);
});
},
barChart() {
// Function to create the bar chart using Chart.js library
},
}
I attempted to update the data according to Ward 1 from the JSON data mentioned above. However, even though the chart received the updated data, it failed to render. This is the function responsible for updating the data:
setDataBywardID(data) {
axios
.get("api/v1/household/dashboard/getGenderCountAccordingToWard/" + data)
.then((res) => {
// Processing the updated data
})
.catch((err) => {
console.log(err);
});
},