Remove tooltip in synchronized charts when the user leaves the chart area

Question

I use the Highcharts Synchronized Chart to show statistics. For reference: http://www.highcharts.com/demo/synchronized-charts .

Here, when the chart is built for the first time, data points will not be selected. As the cursor enters the chart area, tooltips, crosshairs, and data points pop up. It works as expected.

I need a modification, when the user leaves the graph, the diagram should look like it was at the loading stage.

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

Thanks in advance for any help or suggestion.

Answer 1

use mouseleave to detect when the mouse is outside the container:

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

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

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

Check out 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
            }
          }]
        });
    });
  });
});