CODEWITHSUNDEEP
jqueryhighcharts
ashenshugar
ashenshugar

Reputation: 91

Not all Tooltips and crosshairs not fading from synchronised charts when the mouse leaves a chart

I'm working to implement a personal website that utilizes synchronized charts to display weather data. I have managed with the help of people here to get the site loading the data from a JSON file, correctly format the charts and synchronize the x-axis zoom along with the showing the tooltip and crosshair for all charts on the page. However there is one bug, the tooltips and crosshairs only fade for the chart which the mouse was over when it left the chart area.

Is there a way that the tooltips and crosshairs can be made to fade when the mouse leaves a single chart?

This previous question has links to jsfiddles which show the issue: Capturing touch events (touchstart and touchmove) in addition to mousemove for synchronising highcharts

UPDATE: I've figured out how to trigger the mouseOut event when the cursor leaves the chart area, but I am still struggling with the code required to trigger the hiding of the tooltip and crosshair

plotOptions: {
      spline: {
        events: {
          mouseOut: function() {
              console.log('Chart Clear!');
            }
      }
    },

The best jsfiddle to refer to, to see the issue is jsfiddle.net/BlackLabel/xLsdrco8

UPDATE 2:

Looking at the synchronise chart example on the Highcharts website they have the following

// Override the reset function, we don't need to hide the tooltips and crosshairs.
Highcharts.Pointer.prototype.reset = function () {
  //Is this is where I would put code to hide the tooltips and crosshairs?
};

I've included this code in my page for now as it stops any tooltips and crosshairs fading out, however, I'd still prefer to have them all disappear when the cursor is not on a chart.

UPDATE 3:

I've found the following code here: http://jsfiddle.net/mushigh/a3kjrz6u/

$('#container').bind('mouseleave mouseout ', 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(); 
    }
  });

but I'm not sure how it include it in my code here: http://jsfiddle.net/ashenshugar/716jx4n9/

Can someone show me how to get the above working in my code?

Upvotes: 0

Views: 407

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You can pack your charts containers into some parent element:

<div id="mainContainer">
  <div id="chart1_container" style="height: 400px"></div>
  <div id="chart2_container" style="height: 400px"></div>
  ...
</div>

And add event function to clear tooltip and points status.

$('#mainContainer').bind('mouseleave mouseout ', 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);

    chart.series.forEach(function(s) {
      point = s.searchPoint(event, true);

      if (point) {
        point.setState('');
      }
    });

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

Live demo: http://jsfiddle.net/BlackLabel/xLsdrco8/1/

Upvotes: 1

Related Questions