Angular Chart Js legends click event not working

Question

I am using Chart Js in angular. I need some events to show highlighted segment. On clicking or mousemove any segment its working fine. Now i want to highlight a legend when i click on any one but its not working. Its not event going inside click event. Can someone suggest what i am doing wrong.

.cmp

export class AppComponent implements OnInit  {
  chart: any;

  colorOptions = ['red', 'pink']

ngOnInit() {

    this.chart = new Chart('canvas', {
          type: 'doughnut',
          data: {
            labels: ['red','pink'],
            datasets: [
              { 
                data: [55,45],
                backgroundColor: ['rgba(255, 0, 0, 1)','rgba(255, 0, 0, 0.1)'],
                fill: false,
              },
            ]
          },
          options: {
            legend: {
              display: true,
              labels:{
                usePointStyle:true,
              },
              onClick: (event, legendItem) => {
                console.log("This is not working")
                  // i want to highlight clicked legend here
              }
            },
            tooltips:{
              enabled:false
            },
            // events: ['click','mousemove'],
            onClick: (evt, item) => {
              if(item[0]) {
                this.chart.update()
                item[0]._model.outerRadius += 10
              } else {
                this.chart.update()
              }
            },
            onHover: (evt, item) => {
              if(item[0]) {
                this.chart.update()
                item[0]._model.outerRadius += 10
              } else {
                this.chart.update()
              }
            }
          }
        });
  }
 
}

html

<div [hidden]="!chart">
  <canvas id="canvas"></canvas>
</div>

Demo link

https://stackblitz.com/edit/chartjs-doughnut-chart-u1yj6h?file=src/app/app.component.html

Answer 1

You can check ng2-charts which is the Angular port of Chart.js. You can always try to get the Angular port of libraries as it will be easier to work with and won't get surprised with not working things (Like not detecting changes in callbacks).

import { Component, OnInit } from "@angular/core";
import { ChartType } from "chart.js";
import { MultiDataSet, Label, Colors } from "ng2-charts";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  // Doughnut
  public doughnutChartLabels: Label[] = ["red", "pink"];
  public doughnutChartData: MultiDataSet = [[55, 45]];
  public colors = [
    {backgroundColor:['rgba(255, 0, 0, 1)','rgba(255, 0, 0, 0.1)']}
  ];
  public doughnutChartType: ChartType = "doughnut";
  options = {
    legend: {
      display: true,
      labels: {
        usePointStyle: true
      },
      onClick: (event, legendItem) => {
        console.log("This is working!");
      }
    },
    tooltips: {
      enabled: false
    },
    onClick: (evt, item) => {
      console.log('Clicked!')
    }
  };

  constructor() {}

  ngOnInit() {}
}

and you template is:

<div style="display: block;">
  <canvas baseChart 
    [data]="doughnutChartData"
    [labels]="doughnutChartLabels"
    [chartType]="doughnutChartType"
    [colors]="colors"
    [options]="options"
    >
  </canvas>
</div>

You can check the StackBlitz here: https://stackblitz.com/edit/ng2-charts-doughnut-template-yjugml2