Tooltip outside working in highcharts but not in highstock

Question

I'm having issues with tooltip outside in highstock, but it works perfectly fine in highcharts

I checked the docs & there doesn't seem to be a difference in config for tooltip for highstock vs highcharts.

Please find a highcharts jsfiddle: https://jsfiddle.net/gv5szaeu/

relevant snippet

Highcharts.chart('container1', {

chart: {
    type: 'column',
    borderWidth: 1
},

  tooltip: {
      outside: true,
      useHTML: true,
      formatter: function() {
       var s =  '<table><tr><td>test<br>test<br>test<br>test<br></td></tr></table>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       return s;
       },
  },
});

And highstock: https://jsfiddle.net/h45o2xwv/4

Highcharts.stockChart('container', {

    tooltip: {
      outside: true,
      useHTML: true,
      formatter: function() {
       var s =  '<table><tr><td>test<br>test<br>test<br>test<br></td></tr></table>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       s += '<br>test<br>test<br>test<br>';
       return s;
       },
  },
 });

Expected: tooltip: outside should work the same in both

Actual: highstock tooltip not displaying at all; highcharts tooltip displaying correctly outside of chart.

ppotaczek ppotaczek · Accepted Answer · 2019-02-18T06:53:24

In Highstock a split option is enabled by default, so you need to disable it:

tooltip: {
    split: true,
    ...
}

Live demo: https://jsfiddle.net/BlackLabel/46ywhxou/

API: https://api.highcharts.com/highstock/tooltip.split

Tooltip outside working in highcharts but not in highstock

1 Answers