Toggle Tooltip dynamically

[fitimsijarinaa]

Reproduction of the problem

Hi,

I am using the "ng2-charts": "^3.0.0-rc.4" and "chart.js": "^3.5.0". I want to enable or disable the tooltip dynamically. This are my configurations:

public barChartOptions: ChartConfiguration["options"] = {
    responsive: true,
    plugins: {
      tooltip: {
        // Disable the on-canvas tooltip
        enabled: false,
      },
    }

Then I am using it like this right now:

   public toggleTootlip(enableTooltip: boolean): void { 
      this.chart?.options?.plugins?.tooltip?.enabled = enableTooltip;
      this.chart?.render();
  }

Is there a cleaner way to do it?

[fitimsijarinaa]

@santam85 is there a way t update the ChartConfiguration and update without rerendering the charts?

[santam85]

You can call the update() method on the directive instance, that should do the trick.

@ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;
[...]
chart.update()

[fitimsijarinaa]

@santam85 this doesn't work for me unfortunately.

[santam85]

Probably the tooltip plugin implementation does not check the value again after rendering. Maybe you could use the callbacks and prevents tooltip to show that way: https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks