title: Updating data in chart.js
body: <p>I just met <code>chart.js</code> and I'm trying to handle it but it's getting hard for me.</p>
  
  <p>My intention is to initially have some data, <code>var data = [2478,5267,734,784,433];</code> but if a button is clicked, these are modified and the table is updated, var <code>data = [2,5,7,7,4];</code></p>
  
  <p>With the code I show below I can do it, but I am really creating a new one and therefore the two overlap me.</p>
  
  <pre><code>function pieChart(datos){
      var ctx = document.getElementById("pie-chart").getContext("2d");
  
      var tipo = 'pie';
      var etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America"];
      //var datos = [2478,5267,734,784,433];
      var colores = ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"];
      var titulo = 'Predicted world population (millions) in 2050';
  
      var myPieChart = new Chart(ctx, {
          type: tipo,
          data: {
              labels: etiquetas,
              datasets: [{
                backgroundColor: colores,
                borderWidth: 1,
                borderColor: '#FFF',
                data: datos
              }]
            },
            options: {
              title: {
                display: true,
                text: titulo
              }
            }
      });
  }
  
  // MAIN
  $(document).ready(function(){
  
      var datos = [2478,5267,734,784,433];
      pieChart(datos);
  
      // Botón pulsado
      $('.btn_graf').click(function(){
          var id_btn = $(this).attr("id");
  
          if (id_btn == 'bat_graf_btn'){
              alert('pulsado');
              var datos = [2,5,7,7,4];
              pieChart(datos);
          }
      });
  });
  </code></pre>
  
  <p>Reading the <a href="https://www.chartjs.org/docs/latest/developers/updates.html" rel="nofollow noreferrer">documentation</a> I see that it can be done by calling a function and adding values ​​to the array and I suppose that the old ones have been previously removed. But I don't know how to do it because I probably have something wrongly done / understood.</p>
  
  <pre><code>function pieChart(datos){
      var ctx = document.getElementById("pie-chart").getContext("2d");
  
      var tipo = 'pie';
      var etiquetas = ["Africa", "Asia", "Europe", "Latin America", "North America"];
      //var datos = [2478,5267,734,784,433];
      var colores = ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"];
      var titulo = 'Predicted world population (millions) in 2050';
  
      var myPieChart = new Chart(ctx, {
          type: tipo,
          data: {
              labels: etiquetas,
              datasets: [{
                label: "Population (millions)",
                backgroundColor: colores,
                borderWidth: 1,
                borderColor: '#FFF',
                data: datos,
              }]
            },
            options: {
              title: {
                display: true,
                text: titulo
              }
            }
      });
  }
  function addData(chart, label, data) {
      chart.data.labels.push(label);
      chart.data.datasets.forEach((dataset) =&gt; {
          dataset.data.push(data);
      });
      chart.update();
  }
  function removeData(chart) {
      chart.data.labels.pop();
      chart.data.datasets.forEach((dataset) =&gt; {
          dataset.data.pop();
      });
      chart.update();
  }
  
  // MAIN
  $(document).ready(function(){
  
      var datos = [2478,5267,734,784,433];
      pieChart(datos);
  
      // Botón pulsado
      $('.btn_graf').click(function(){
          var id_btn = $(this).attr("id");
  
          if (id_btn == 'bat_graf_btn'){
              alert('pulsado');
              var datos = [2,5,7,7,4];
              removeData(myPieChart);
              addData(myPieChart, "Population (millions)", datos);
          }
      });
  });
  </code></pre>
  
  <p>If someone can guide me it would be great. I think it is a very useful tool when it comes to graphing information and I would like to learn how to handle it.</p>
  
  <p>Thank you very much.</p>