CODEWITHSUNDEEP
highcharts
ExaSephiroth
ExaSephiroth

Reputation: 165

Tooltip outside working in highcharts but not in highstock

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.

Upvotes: 0

Views: 784

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

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

Upvotes: 3

Related Questions