Hide the Tooltip in ChartJS

How to Filter an Object by Key in JavaScript

Apr 1, 2022

To disable the tooltip menu that pops up when you hover over a chart element, you must disable it in the options object of your chart configuration.
The path is options.plugins.tooltip.enabled and because the default is true, you must set it to false.

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
    data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: 'Example Data',
      data: [12, 19, 3, 5, 2, 3]
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        enabled: false 

Below is a live example of a bar chart with tooltips disabled.

For comparison, below is the same chart with tooltips enabled.

More Chartjs Tutorials

Source link

Leave a reply

Please enter your comment!
Please enter your name here