Highcharts Shared Tooltip not appearing for multi-axes chart with positioning

Question

I have a chart with multiple y axes. I have moved one chart to bottom using top option. When I hover on the graph moved to bottom, shared tooltip does not appear. When I hover on the space just above the bar chart. Space between the bar and 100 (in Y axis), the tool -tip does not appear. Hover on the space right or left to the bar, tool-tip does not appear.

I don't want to have the graph in its default position. It looks cleaner when I have two graphs separated. Can I make the shared tool tip work when graph is moved down ?

My code: yAxis: [{ top: 148 }, { top: 0 }], tooltip: { shared: true, crosshairs: { color: 'rgba(27,161,218,0.5)', dashStyle: 'solid', zIndex: -1 } },

Here is the fiddle: multi-axes graph with positioning

Any input appreciated. Thanks

Answer 1

Look at using synchronized charts.

http://www.highcharts.com/demo/synchronized-charts

The JSFiddle is updated to use synchronized charts. JSFiddle

$(function() {
$('#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.highlight(e);
  }
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
}; 

/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function(event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};

/**
* 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'
        });
      }
    }
  });
}
}

var dataset = [{
"name": "Series 1",
"type": "column",
"data": [29.9, 71.5, 106.4]
}, {
"name": "Series 2",
"type": "line",
"data": [216.4, 194.1, 95.6]
}];

for (var i = 0; i < dataset.length; i++) {
var dataitem = dataset[i];
$("<div class=\"chart\">")
  .appendTo('#container').highcharts({
    title: {
        text: dataitem.name
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar']
    },
    tooltip: {
      crosshairs: {
        color: 'rgba(27,161,218,0.5)',
        dashStyle: 'solid',
        zIndex: -1
      }
    },
    series: [{
      data: dataitem.data,
      name: dataitem.name,
      type: dataitem.type
    }]
  });
};
});