Unable to correctly position the tooltip content in HighCharts

Question

I am using HighCharts combination chart to compare a forecast value(indicated by line) and a cumulative value (indicated by column). The cumulative value keeps increasing weekly and I want to be able to see if it reaches the predicted forecast value.

I created a graph in this js fiddle, http://jsfiddle.net/aroauy4t/ . I have shown the 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 the tooltip content overflows when the x axis doesn't contain a label like in the image shown below.

How can I get the tooltip to behave without any overflow (like in the image below)

Answer 1

You could also make use of tooltip - useHTML property. When turned on the tooltip is rendered as excepted.

tooltip: {
    useHTML: true
}

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

Answer 2

I got it to work (I don't know HighCharts very well) by using the following in your js fiddle:

categories: ["\u00A0", "\u00A0", 'Bananas', "\u00A0", "\u00A0"]

00A0 is the unicode character for non-breaking space.

Maybe it will work for you.