Angular 5 chart.js onclick returning empty array

Question

I'm trying to get the onclick function in chart.js to work, and found out about the getElementsAtEvent(event) function that should return an array containing the data of the part of the chart that I click, but it's constantly returning an empty array.

Here's my code:

var canvas = this.el; //this is an elementref
canvas.onclick = (event) => {
  var data = this.chart.getElementsAtEvent(event)
  console.log(data);
}

this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: ["Browser", "Game", "Word Processing", "Database", "Spreadsheet", "Multimedia"],
    datasets: [{
      label: 'number of applications related to',
      data: [24, 10, 30, 20, 46, 78],
      backgroundColor: 'rgba(54, 162, 235, 0.2',
      borderColor: 'rgba(54, 162, 235, 1)',
      pointHoverBackgroundColor: 'red',
      borderWidth: 1
    }]
  },
  options: {
    title: {
      text: "Application Logs",
      display: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
})

Not sure if this is part of why it doesn't work but here's my canvas:

<canvas id="canvas" width="300" height="123" class="chartjs-render-monitor"></canvas>

Like I mentioned it just prints out an empty array [] in the console, and using console.log(data[0]) obviously just returns undefined.

check my answer it should solve your issue.

Niladri
– Niladri

2018-05-30 15:13:02 +00:00
Commented May 30, 2018 at 15:13 — Niladri
– Niladri, Commented May 30, 2018 at 15:13
I have added a demo link

Niladri
– Niladri

2018-05-30 17:48:16 +00:00
Commented May 30, 2018 at 17:48 — Niladri
– Niladri, Commented May 30, 2018 at 17:48

Niladri · Accepted Answer · 2018-05-30 15:11:52Z

The below code works for me, and also it's not required to use ElementRef to add the click event handler. You can just call a method on the (click) event of the <canvas> like below -

<canvas id="canvas" width="300" height="123" #mychart (click)="showData($event)" class="chartjs-render-monitor">{{chart}}</canvas>

Here I have rendered the chart using the chart property of the component.

Here is the showData() method -

showData(evt:any){
  var data = this.chart.getElementsAtEvent(evt)
  console.log(data[0]._model); // it prints the value of the property
}

Here is the complete working code -

app.component.ts

import { Component,ViewChild,ElementRef,OnInit } from '@angular/core';
import Chart from 'chart.js';
declare var Chart: any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{
  name = 'Angular 5';
  chart:any;
  // @ViewChild('mychart') el:ElementRef; 

  constructor(){

  }

  ngOnInit(){
    this.createChart();
  }
createChart(){
// var canvas = this.el; 

this.chart = new Chart('canvas', {
  type: 'bar',
  data: {
    labels: ["Browser", "Game", "Word Processing", "Database", "Spreadsheet", "Multimedia"],
    datasets: [{
      label: 'number of applications related to',
      data: [24, 10, 30, 20, 46, 78],
      backgroundColor: 'rgba(54, 162, 235, 0.2',
      borderColor: 'rgba(54, 162, 235, 1)',
      pointHoverBackgroundColor: 'red',
      borderWidth: 1
    }]
  },
  options: {
    title: {
      text: "Application Logs",
      display: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
})
}
    showData(evt:any){
      var data = this.chart.getElementsAtEvent(evt)
      console.log(data[0]._model);
     }

}

app.component.html

<canvas id="canvas" width="300" height="123" #mychart (click)="showData($event)" class="chartjs-render-monitor">{{chart}}</canvas>

Here is a working demo - https://stackblitz.com/edit/angular-5-example-txcthz

Collectives™ on Stack Overflow

Angular 5 chart.js onclick returning empty array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related