title: How can I get the active label element on click in ChartJS?
body: <p>I have created a pie chart using ChartJS.</p>
  <p>Now I want to create a click handler in which I can get the label and value of the part of the chart that I have created. How do I achieve that?</p>
  <pre class="lang-js prettyprint-override"><code>let my_chart = new Chart('tot_pop_chart', {
      type: 'pie',
      data: {
        labels: ['NSW', 'VIC', 'QSD', 'SA', 'WA', 'TAS', 'NT', 'ACT'],
        datasets: [{
            data: [1, 2, 3, 4, 5, 6, 7, 8],
            backgroundColor: ['rgba(63, 75, 59, 1)', 'rgba(242, 246, 208, 1)', 'rgba(197, 123, 87, 1)', 'rgba(118, 159, 182, 1)', 'rgba(58, 110, 165, 1)', 'rgba(88, 12, 31, 1)', 'rgba(157, 172, 255, 1)', 'rgba(122, 48, 108, 1)']
          }
  
        ]
      },
      options: {
        animation: {},
        plugins: {
          legend: {
            display: true,
            position: 'bottom'
          }
        },
        onClick: ... //see below
      }
    }
  
  );
  </code></pre>
  <p>My current attempt is below:</p>
  <pre class="lang-js prettyprint-override"><code>onClick:
    e =&gt; {
      console.log(&quot;In click&quot;, e.chart);
  
      // find the index of the clicked item
      let canvasPosition = Chart.helpers.getRelativePosition(e, e.chart);
      let index = e.chart.scales.x.getValueForPixel(canvasPosition.x);
  
      // now I want to retrieve the label/data using the index, how to?
    }
  </code></pre>
  <p>However, the error occurs as <code>TypeError: Cannot read property 'getValueForPixel' of undefined</code>. Also, how do I retrieve the label/data using the index in the onClick function?</p>
  <p>Thanks a lot for your help!</p>