CODEWITHSUNDEEP
html5-canvaschart.js
user1937021
user1937021

Reputation: 10771

Hide/disable tooltips chart.js

I'm trying to hide the tooltips in a line chart using chart.js.

I have tried this code, but they never hide.

Chart.defaults.global.tooltipenabled = false;

You can see all the code here of the chart:

https://jsfiddle.net/w6zs07xx/ Thanks!

Upvotes: 66

Views: 85627

Answers (9)

Josh Bonnick
Josh Bonnick

Reputation: 2813

For v4.4

options: {
  plugins: {
    tooltip: {
      enabled: false
    }
  }
}

Docs - https://www.chartjs.org/docs/latest/configuration/tooltip.html

Upvotes: 51

Josh Hibschman
Josh Hibschman

Reputation: 3714

As of version 4, you can hide (but still leave enabled for callbacks by)

tooltip: {
  backgroundColor: 'rgba(0, 0, 0, 0)',
  borderColor: 'rgba(0,0,0,0)',
  footerColor: 'rgba(0,0,0,0)',
  bodyColor: 'rgba(0,0,0,0)',
  titleColor: 'rgba(0,0,0,0)',
  displayColors: false,
  callbacks: {
    footer: (tooltipItem)=>{ console.log(tooltipItem)},
  },
},

Upvotes: 0

Mir Adnan
Mir Adnan

Reputation: 884

For me this worked.

Using Chart JS version 4.1.1

Chart.defaults.plugins.tooltip.enabled = false;

Upvotes: 0

Andreas Haufler
Andreas Haufler

Reputation: 411

For 3+ the path is options.plugin.tooltip.enabled.

Upvotes: 6

Miguel Carvalhais Matos
Miguel Carvalhais Matos

Reputation: 1143

For v2.9.3:

options: {
    tooltips: false
}

Upvotes: 8

Karthikeyan Ganesan
Karthikeyan Ganesan

Reputation: 2035

use the following option for hide the tooltip 

 tooltips :{
                custom : function(tooltipModel) 
                 {
                  tooltipModel.opacity = 0;
                 }
           }

Upvotes: 4

Jon
Jon

Reputation: 1165

To turn off for a specific chart instead of in global defaults use this in the options object. Using v2.5.0

options: {
    tooltips: {
         enabled: false
    }
}

Upvotes: 115

Diego Galocha
Diego Galocha

Reputation: 310

For me showTooltips = false didn't work.

My solution was:

Chart.defaults.global.tooltips.enabled = false;

My version is:

2.1.4

Upvotes: 16

potatopeelings
potatopeelings

Reputation: 41075

You have the wrong property name. It should be 

Chart.defaults.global.showTooltips = false;

Fiddle - https://jsfiddle.net/0tfvnmx1/

Upvotes: 8

Related Questions