Remove Tooltip in Synchronized Charts, When user leaves the chart area

Question

I am using Synchronized chart of Highcharts to demonstrate the statistics. For reference : http://www.highcharts.com/demo/synchronized-charts.

Here, when the chart is getting plotted for the first time, no data points is selected. As, the cursor enters into the chart area, the tooltip, crosshairs and data points get highlighted. It works as expected.

The modification I need is, when the user comes out of the chart, the chart should look like as it was in the loading stage.

i.e. If the cursor is not on any of the chart,then no data points should remain selected. In other words, the tooltip, crosshair and the highlighted shadow on data point should get removed.

Thanks in advance for any help or suggestion.

Answer 1

use mouseleave to detect when the mouse is out of the container:

$('#container').bind('mouseleave', function(e) {

use hide method to hide the tooltip and hide Crosshair method to hide the crosshair:

  chart.tooltip.hide(point);
  chart.xAxis[0].hideCrosshair();  

Check the example (jsfiddle):

$(function() {


  $('#container').bind('mouseleave', function(e) {
    var chart,
      point,
      i,
      event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
      chart = Highcharts.charts[i];
      event = chart.pointer.normalize(e.originalEvent);
      point = chart.series[0].searchPoint(event, true);

      point.onMouseOut(); 
      chart.tooltip.hide(point);
      chart.xAxis[0].hideCrosshair(); 
    }
  });
  $('#container').bind('mousemove touchmove touchstart', function(e) {
    var chart,
      point,
      i,
      event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
      chart = Highcharts.charts[i];
      event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
      point = chart.series[0].searchPoint(event, true); // Get the hovered point

      if (point) {
        point.onMouseOver(); // Show the hover marker
        chart.tooltip.refresh(point); // Show the tooltip
        chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
      }
    }
  });
  /**
   * Override the reset function, we don't need to hide the tooltips and crosshairs.
   */
  Highcharts.Pointer.prototype.reset = function() {
    return undefined;
  };

  /**
   * Synchronize zooming through the setExtremes event handler.
   */
  function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
      Highcharts.each(Highcharts.charts, function(chart) {
        if (chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) { // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: 'syncExtremes'
            });
          }
        }
      });
    }
  }

  // Get the data. The contents of the data file can be viewed at
  // https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function(activity) {
    $.each(activity.datasets, function(i, dataset) {

      // Add X values
      dataset.data = Highcharts.map(dataset.data, function(val, j) {
        return [activity.xData[j], val];
      });

      $('<div class="chart">')
        .appendTo('#container')
        .highcharts({
          chart: {
            marginLeft: 40, // Keep all charts left aligned
            spacingTop: 20,
            spacingBottom: 20
          },
          title: {
            text: dataset.name,
            align: 'left',
            margin: 0,
            x: 30
          },
          credits: {
            enabled: false
          },
          legend: {
            enabled: false
          },
          xAxis: {
            crosshair: true,
            events: {
              setExtremes: syncExtremes
            },
            labels: {
              format: '{value} km'
            }
          },
          yAxis: {
            title: {
              text: null
            }
          },
          tooltip: {
            positioner: function() {
              return {
                x: this.chart.chartWidth - this.label.width, // right aligned
                y: -1 // align to title
              };
            },
            borderWidth: 0,
            backgroundColor: 'none',
            pointFormat: '{point.y}',
            headerFormat: '',
            shadow: false,
            style: {
              fontSize: '18px'
            },
            valueDecimals: dataset.valueDecimals
          },
          series: [{
            data: dataset.data,
            name: dataset.name,
            type: dataset.type,
            color: Highcharts.getOptions().colors[i],
            fillOpacity: 0.3,
            tooltip: {
              valueSuffix: ' ' + dataset.unit
            }
          }]
        });
    });
  });
});