javascript - Unable to correctly position the tooltip content in HighCharts -

javascript - Unable to correctly position the tooltip content in HighCharts -

i using highcharts combination chart compare forecast value(indicated line) , cumulative value (indicated column). cumulative value keeps increasing weekly , want able see if reaches predicted forecast value.

i created graph in js fiddle, http://jsfiddle.net/aroauy4t/ . have shown js code below.

$(function () { $('#container').highcharts({ title: { text: 'forecast vs cumulative chart' }, xaxis: { categories: [' ', ' ', 'bananas', ' ', ' '] }, labels: { items: [{ style: { left: '50px', top: '18px', color: (highcharts.theme && highcharts.theme.textcolor) || 'black' } }] }, series: [{ type: 'column', name: 'cumulative', data: [0, 0, 5, 0, 0] }, { type: 'line', name: 'forecast', data: [3, 3, 3, 3, 3], marker: { linewidth: 2, linecolor: highcharts.getoptions().colors[3], fillcolor: 'white' } }] }); });

but tooltip content overflows when x axis doesn't contain label in image shown below.

how can tooltip behave without overflow (like in image below)

you create utilize of tooltip - usehtml property. when turned on tooltip rendered excepted.

tooltip: { usehtml: true }

http://jsfiddle.net/aroauy4t/2/

javascript charts highcharts