Ng2-charts: chartHovered not invoked when hovering on a bar

[singhrasster]

I am creating a bar chart and my HTML code looks like:

<div style="display: block">
    <canvas baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

Typescript has the two handlers:

public chartClicked(e:any):void {
console.log(e);
}

public chartHovered(e:any):void {
console.log(e);
}

When I click on a bar, the chartClicked method is invoked. However, when I just hover on the bar, the chartHovered method is not invoked. Is there a bug?

[arameau]

I have exactly the same problem, on the web of ng2-chart the event works but not in my example

[laurentperroteau]

+1

[misscoded]

On line 55 of the included charts/chart.js, the function passes active -- I believe it should actually be passing event and active, like the onClick below it. Since the first argument passed (actually a MouseEvent) is not the presumed active array, and will never have a length, it will never emit.

To get around it in the meantime, manually define the hover method in options:

hover: {
     onHover: function(event, active) {
          // do stuff with active         
     }
}

[marcus-jan]

+1

@alissarenz Your workaround is good enough for now

[jevit]

how keep scope with
hover: {
onHover: function(event, active) {
// do stuff with active
}
}

?

[vedk21]

you can use an arrow function if working in typescript.
say
hover: { onHover: (event, active) => { // do stuff with active this.your_property } }

[popsapple]

(mouseover)="chartHovered($event)"

Good Luck :)

[labeltran01]

Hi, i have the same problem, i´m working with Angular4, when I use chartHover, it doesn´t return any value.

I have something like this:
`in the HTML:

in the component:

export class PieChartComponent implements OnInit {
// Doughnut
public doughnutChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
public doughnutChartData: number[] = [350, 450, 100];
public doughnutChartType: string = 'doughnut';

ngOnInit() {

}

// events
public chartClicked(e: any): void {
console.log(e);
}

public chartHovered(e: any): void {
console.log(e);
}
}`

[cemezgin]

Is there any solution for this ? I solved this problem with @alissarenz s solution but it has also a problem. When the resize screen without again hover chart doesn't display on screen.

[paviad]

Please refer to the updated demo app, it shows that the hover even works over bars in the bar chart.