How to Disable Tooltips in Chart.js After Initialization (Without Access to the Code)

If you’re using a plugin like Crocoblock or any other tool that automatically generates Chart.js charts, you might find yourself in a situation where you don’t have direct access to the chart initialization code.

One common issue is disabling tooltips after printing the chart. By default, Chart.js tooltips appear when you hover over a data point, but after printing, you may want to remove them to avoid unnecessary distractions.

Solution: Disable Tooltips After Printing:

Even if you don’t have access to the original chart initialization, you can dynamically modify the Chart.js settings after the chart is loaded.

Here’s a simple JavaScript snippet to disable tooltips after printing:

window.addEventListener("afterprint", function () {
  // Find all Chart.js instances on the page
  if (window.Chart) {
    Chart.helpers.each(Chart.instances, function (chart) {
      if (chart.options.tooltips) {
        chart.options.tooltips.enabled = false; // Disable tooltip
        chart.update(); // Apply changes
      }
    });
  }
});

How This Works

1. Detects the “afterprint” event – This runs when the user prints the page.
2. Finds all Chart.js instances on the page, even those created by plugins.
3. Disables tooltips dynamically by modifying the Chart.js options.
4. Updates the chart so the changes take effect immediately.
   

Bonus: Re-Enabling Tooltips Before Print

If you want to re-enable tooltips before printing, add this snippet as well:

window.addEventListener("beforeprint", function () {
  if (window.Chart) {
    Chart.helpers.each(Chart.instances, function (chart) {
      if (chart.options.tooltips && chart.options.tooltips) {
        chart.options.tooltips.enabled = true; // Re-enable tooltip
        chart.update();
      }
    });
  }
});