How to get the Label name of the chart using angular

0
860

Try this code:

.ts file

 public barChartOptions = {
    legend: {
      labels: {
        //fontFamily: '"Arvo", serif',
        fontSize: 20,
      }
    }
  };
public chartClicked(e: any): void {
    if (e.active.length > 0) {
      const chart = e.active[0]._chart;
      const activePoints = chart.getElementAtEvent(e.event);
        if ( activePoints.length > 0) {
          // get the internal index of slice in pie chart
          const clickedElementIndex = activePoints[0]._index;
          const label = chart.data.labels[clickedElementIndex];
          console.log(label)
        }
      }
  }

.html

<div style="display: block">
    <canvas id="pie" baseChart
            [data]="pieChartData"
            [labels]="pieChartLabels"
            [chartType]="pieChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
            [options]="barChartOptions"></canvas>
  </div>

working link

Github link for this

https://github.com/valor-software/ng2-charts/issues/489

LEAVE A REPLY

Please enter your comment!
Please enter your name here