How to programmatically hide tooltip in tall charts?

Question

I am trying to implement highcharts in a mobile application, everything works fine, but there is one problem in which when changing the orientation from potrait to landscape, the tooltip shown for any selected point does not hide the orientation change.

Please suggest me to hide the tooltip programmatically in highcharts.

I tried the code below:

$('#tankActualUsagechart').highcharts().tooltip.hide();

but this does not hide the marker that I am showing ...

If there is a way to hide the marker, I understand this too.

Please help me in this matter.

Answer 1

Please see http://jsfiddle.net/St84H/

You can hide the hint with

 tooltip: { enabled: false } 

Answer 2

As long as you have a link to the Highcharts chart object, you can hide the tooltip like this:

 // create chart var myChart = new Highcharts.Chart({ /* snip */ }); // hide tooltip myChart.tooltip.hide(); 

Answer 3

You must provide a formatting function. The trick is to return false when you don't want to show anything

Here is a little test

HTML page -

 <script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px"></div> <button id='toggleTooltip'>Toggle tooltip</button> 

JS Code -

 $(function () { $('#container').highcharts({ title: { text: 'tooltip enabled is set to false' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }, { data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4] }] }); $('#toggleTooltip').click(function () { var tooltipOptions = $('#container').highcharts().tooltip.options; if ($(this).hasClass('enabled')) { tooltipOptions.formatter = null; $(this).removeClass('enabled'); } else { tooltipOptions.formatter = function () { return false; } $(this).addClass('enabled'); } }); }); 

Watch live here

Answer 4

I went through a lot of forums and nowhere I have found a very simple way to show / hide a tooltip like tooltip.enable = true / false. A good way I've come is to set up a tooltip via Formatter when initializing the chart.

var barsShowen is a global variable that has the desired command: true / false - show Tooltip or not.

This example will work in my project www.tanks-vs .com after the beginning of December 2014. You could see.

 tooltip: { shared: true, useHTML: true, formatter: function() { if (barsShowen) { var s = '<span><b>' + this.x + '</b></span><table>'; $.each(this.points, function () { s += '<tr><td align = "left" style = "color:' + this.series.color + ';">' + this.series.name + ': ' +'</td>' + '<td><b>'+ this.y +'</b></td></tr>' ; }); return s+'</table>'; } else { return false; } } 

Answer 5

You need to set the default marker / point state.

Something like that:

 chart.series[0].data[index_of_tooltip_point].setState(""); 

Answer 6

Try using the code below:

 $(function () { var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, plotOptions: { series: { events: { click: function(e) { enabledTooltip(); } } } }, tooltip: { crosshairs: [{ dashStyle: "Solid" }, false], enabled: false }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); var enabledTooltip = function(){ alert(567); var options = chart.options; options.tooltip.enabled = true; chart = new Highcharts.Chart(options); }; }); 

Hope this works for you.

Answer 7

It is jenky, but served my purposes

 $(document).ready(function(){ $('.highcharts-container text:last').hide() }) 

Answer 8

Try this if you need to at runtime.

chart.tooltip.hide ();

This worked for me http://forum.highcharts.com/highcharts-usage/tooltip-how-to-show-hide-tooltips-onblur-t5926/

Answer 9

I use chart.pointer.reset() to remove the marker and tooltip during legendItemClick and it works like a charm

jsfiddle sample

Answer 10

You can use the chart.myTooltip.destroy() method to chart.myTooltip.destroy() remove the tooltip. For example:

 var myChart = new Highcharts.Chart({ /* ... */ }); myChart.myTooltip.destroy(); 

This will delete the current instance, and it will reappear the next time you hover over a point (or whatever action the user would take to show a tooltip).

Answer 11

Try with the enabled option with false as:

 tooltip: { enabled: false, } 

Try FIDDLE