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

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