How to get correct x or y-axis label when user click on chart

[pavangayakwad]

Charts 2.xx version had a way to get the label of the chart when user click on the chart element. Here is the working example : https://stackblitz.com/edit/angular-chart-js-click-label

However, I am unable to accomplish the same with charts 3.xxx version.

onClick(event: any, elements: any[], chart: Chart) {
          let point = getRelativePosition(event, chart);
          let xIndex = chart.scales.x.getValueForPixel(point.x);
          let label = chart.data.labels[xIndex];
          console.log(label + ' at index ' + xIndex);
        }

with the above code, it works fine for bar chart, however, wrong label returned when I am pie on chart.

[pavangayakwad]

Screenshot. I am supposed to get the label shown in the tooltip, but the code above getting me the chart axis value - I guess

[pavangayakwad]

I was able to solve it by adding below code:

options: {
  onClick: (event: any, elements: any[], chart: Chart) => {
          var acives = chart.getActiveElements();
          let label :string = <string> chart.data.labels[acives[0].index];
          .....
        },
}

I wish chartjs documentation had a section for Angular specific development needs, would have saved my day.