Chart.js: Enable tooltip by click

[koehrlenguillaume]

Hello everyone,

I would like to display tooltip only by user click. The aim is to replace the actual hover event by the click event on the same chart element.
I didn't find any answer on this topic for the second chart.js version.

Thank's for your help :+1:

Guillaume

[koehrlenguillaume]

I found a solution. We have to change the global event array :
Chart.defaults.global.events = ["click"]

[etimberg]

Thanks for posting the solution @koehrlenguillaume

[marloningal]

tooltip doesn't hide when you click outside the chart

[frabnt]

@marloningal Did you find a solution for outside click?

[marloningal]

@frabnt not yet

[frabnt]

@marloningal

The angular way:

@HostListener('document:click', ['$event'])
  private _hideTooltip($event: MouseEvent) {
    const clickedInside = this._elementRef.nativeElement.contains($event.target);
    if (!clickedInside) {
      const tooltip = this._chart.tooltip; // this._chart is a reference to the chart instance
      tooltip._active = [];
      tooltip.update(true);
      this._chart.update();
    }
  }

[SovannthaiNEANG]

I found a solution. We have to change the global event array :
Chart.defaults.global.events = ["click"]

Thank you for solve this problem @koehrlenguillaume