title: ChartJs events in Angular
body: <p>I'm making a chart where I need to click on each data label (I point this out in the image below) to then display the specific charts of the data that was clicked.</p>
  <p><a href="https://i.stack.imgur.com/AIaO9.png" rel="nofollow noreferrer">Graph</a></p>
  <p>My problem is that I cannot click and identify which data label I am pressing, I know I am using the getElementsAtEvent method from ChartJs, but using the bound data in Angular I cannot access this method (I am not creating a chart object). I share my code below:</p>
  <p><strong>My template:</strong></p>
  <pre><code>&lt;div style=&quot;display: block&quot;&gt;
  &lt;canvas id =&quot;radarChart&quot; baseChart [datasets]=&quot;radarChartData&quot; [labels]=&quot;radarChartLabels&quot;
      [chartType]=&quot;radarChartType&quot; [options]=&quot;radarChartOptions&quot;&gt;&lt;/canvas&gt;
  </code></pre>
  <p><strong>My component:</strong></p>
  <pre><code>export class GraficoRadarComponent implements OnInit {
  
    public radarChartLabels = [];
    public radarChartData = [{
      label: '',
      data: [],
      hidden: false,
    },
    ];
  
    public radarChartOptions = {
      responsive: true,
      scale: {
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 4,
          stepSize: 1,
        },
        pointLabels: {
          fontSize: 15,
        }
      },
      legend: {
        onHover:this.chartClickEvent,
        position: 'right',
        labels: {
          fontColor: 'black',
          fontSize: 15,
        },
      }
    };
    public radarChartType = 'radar';
  
    chartClickEvent(event, array) {
      console.log(event)
     };
  ...
  </code></pre>