Update chartJS after select date

$(document).ready(function () {
    //-----------------------------------
    var myChart = null; // "global" access...

    function ChartData(label, value) {
      const ctx = document.getElementById('myChart').getContext('2d');
      myChart = new Chart(ctx, {

        type: 'bar',
        data: {
            labels: label,
            datasets: [{
                label: 'Jumlah Lot',
                data: value,
                backgroundColor: [
                    "#0077B6",
                    "#EF233C",
                    "#8338EC",
                    "#E4C1F9",
                    "#FFD6FF",
                    "#57CC99",
                    "#8AC926",
                    "#99D98C",
                    "#D88C9A",
                    "#AED9E0",
                    "#B9FBC0",
                    "#9D4EDD",
                    "#70E000",
                    "#A9DEF9",
                    "#DEB887",
                    "#A9A9A9",
                    "#DC143C",
                    "#F4A460",
                    "#2E8B57",
                    "#1D7A46",
                    "#CDA776",
                    "#989898",
                    "#CB252B",
                    "#E39371",
                ],
                borderColor: [
                    "#264653",
                ],
                borderWidth: [1, 1, 1, 1, 1,1,1,1, 1, 1, 1,1,1]
            }]
        },
        options: {
            responsive: true,
            title: {
            display: true,
            position: "top",
            text: "Data pengecekan lot AX",
            fontSize: 18,
            fontColor: "#111"
            },
            legend: {
            display: true,
            position: "bottom",
            labels: {
                fontColor: "#333",
                fontSize: 16
            }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    suggestedMax: 12
                }
            },
            layout: {
                padding: 10
            }
        }
      });
    }

    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();
    }

    //-----------------------------------

    //initial datepicker for filter dashboard
    $('#filterDash').datepicker({
      format: 'yyyy/mm/dd',
      autoclose: true,
      todayHighlight: true,
      // toDate: '0d',
      // endDate: '0d',
      orientation: 'bottom',
    });

    //on change filter dashboard
    $('#filterDash').on('change', function(){
      var filterDash = $("#filterDash").val();
      var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
      var csrfHash = $('.txt_csrfname').val(); // CSRF hash

      var dataJson = {
        [csrfName]: csrfHash,
        filterDash: $("#filterDash").val()
      };
      //alert(filterDash);

      $.ajax({
        url: "<?php echo base_url('/filterDash'); ?>",
        type: "post",
        data: dataJson,
        dataType: "json",
        success: function(data)
        {
          // Update CSRF Token
          $('.txt_csrfname').val(data.token);

          //chart data by filter
          var label = [];
          var value = [];
          var datas = data.chart_data;
          for (var i in datas) {
              label.push(datas[i].tipe);
              value.push(datas[i].count);
          }
          ChartData(label, value);
          removeData(myChart);
          addData(myChart, label, value);

          //.chart by filter
        },
        error: function (jqXhr, textStatus, errorMessage) { // error callback
          $('p').append('Error: ' + errorMessage);
        }
      });
    });
});