Chartjs-ChartJS chart is bugged after adding new data

by

2👍

✅

Are you drawing a new chart by clicking on the button?
You should draw your chart just 1 time and then update the data:

function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
  });
  chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

Docs: https://www.chartjs.org/docs/latest/developers/updates.html

you can try it with this code:

 $.ajax({
  type: "POST",
  url: "Default.aspx/getReports",
  contentType: "application/json; charset=utf-8",
  data: JSON.stringify({ data: data }),
  dataType: "json",
  success: function(r) {
    data = r.d;
    if (data != "[]") {
      data = jQuery.parseJSON(data);
      chart.data.labels = data.map(ora => ora.ORARIO);
      chart.data.datasets[0].data = data.map(coperti => coperti.COPERTI);
      chart.update();
    } else {
      chart.data.labels = [];
      chart.data.datasets[0].data = [];
      chart.update();
    }
    $("#modalChart").modal("show");
  },
  error: function(error) {
    alert(error.responseText);
  }
});

Leave a comment