Chartjs-OnClick : handleClick

I suggest you add a class or id to each part of your pie chart. using this link
or try this below method

  var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
        var newLegendClickHandler = function (e, legendItem) {
        var index = legendItem.datasetIndex;

       if (index > 1) {
           // Do the original logic
          defaultLegendClickHandler(e, legendItem);
       } 
   };

Even if you define your own onClick handler, click events are still propagated to be handled elsewhere. As you can see in below code snippet, when you click on the legend, “onClick” is written to the console and individual slices of the pie chart are hidden or shown.

function handleClick(evt, legendItem, index, con) {
  console.log('onClick');
}

var pieChart = new Chart("myChart", {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{      
      data: [8, 5, 6],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    }]
  },
  options: {
    events: ['click', 'mousemove', 'touchstart', 'touchmove'],
    onClick: handleClick
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

The problem must be that on each click, you re-create the chart from scratch as following line may suggest:

reloadChart(ar.reverse().join(''), activeElement[0]._chart.data.labels[activeElement[0]._index].substring(0, 2));