vue 3 chart.js data upadated from api but chart is not rendering

Question

vue 3 Chartjs is not rendering data dynamically from API

currently, I am working on vue 3 and I am new. I added a chart from official chartjs documentation I added the data field of the chart from API and it is working fine everything is rendering but whenever I try to update the same data field to another field it is not rendering the chart however Chart is receiving the data but not rendering

this is my JSON data from 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 i call my api

 mounted() {
    this.getData();
  },

method:{
getData() {
      axios
        .get("api/v1/household/dashboard/getDetailByGharMuli")
        .then((res) => {
          this.data = res.data;
          this.wardCount = this.data.length;
          console.log(this.wardCount);
          let i = 0;
          let j = 0;
          for (i = 0; i < this.data.length; i++) {
            this.mdata.push(this.data[i].maleCount);
            this.Fdata.push(this.data[i].femaleCount);
            this.Odata.push(this.data[i].otherCount);
          }
          for (j = 1; j <= this.wardCount; j++) {
            this.llabels.push("Ward" + j);
          }
          this.barChart();
        })
        .catch((err) => {
          console.error(err);
        });
    },
barChart() {
      var Chart = require("chart.js");
      new Chart(document.getElementById("bar-chart-grouped"), {
        type: "bar",
        data: {
          labels: this.llabels,
          datasets: [
            {
              label: "पुरुष जनसंख्या",
              backgroundColor: "rgba(0, 143, 251, 0.8)",
              data: this.mdata,
            },
           {
              label: "महिला जनसंख्या",
              backgroundColor: "rgba(0, 227, 150, 0.8)",
              data: this.Fdata,
            },
            {
              label: "पअन्य जनसंख्या",
              backgroundColor: "rgb(255, 69, 96,0.8)",
              data: this.Odata,
            },
          ],
        },
      });
    },
}

I want to update data from the above JSON data according to Ward 1 but whenever I update data from API, The chart is receiving data but not rendering it

setDataBywardID(data) {
      axios
        .get("api/v1/household/dashboard/getGenderCountAccordingToWard/" + data)
        .then((res) => {
          this.wardData = res.data;
          console.log(this.wardData);
          this.llabels = "total population";
          this.mdata = this.wardData.maleCount;
          console.log(this.mdata);
          this.Fdata = this.wardData.femaleCount;
          console.log(this.Fdata);
          this.Odata = this.wardData.otherCount;
          this.barChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },

Answer 1

Normally when you're trying to update a chart, you don't call new Chart every time.

You should save the chart when you create it (add chart: null to data), then you could check if it exists when calling your barChart function.

Have a read of Updating Charts

Something like this:

barChart() {
    var Chart = require("chart.js");
    var options = {
        type: "bar",
        data: {
            labels: this.llabels,
            datasets: [
            {
                label: "पुरुष जनसंख्या",
                backgroundColor: "rgba(0, 143, 251, 0.8)",
                data: this.mdata,
            },
            {
                label: "महिला जनसंख्या",
                backgroundColor: "rgba(0, 227, 150, 0.8)",
                data: this.Fdata,
            },
            {
                label: "पअन्य जनसंख्या",
                backgroundColor: "rgb(255, 69, 96,0.8)",
                data: this.Odata,
            }]
        }
    };

    if(!chart)
        this.chart = new Chart(document.getElementById("bar-chart-grouped"), options);
    else
    {
        this.chart.options = options;
        this.chart.update();
    }
}