CODEWITHSUNDEEP
highcharts
Bjorn
Bjorn

Reputation: 1110

Tooltip covering bar in highchart

How can I avoid that the tooltip in Highcharts covers the whole bar? I'm trying to create bar chart with drill-down functionality, but the bar for "John" in the example below i always covered by the tooltip itself, which makes drilldown very difficult.

http://jsfiddle.net/3XZwV/

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Column chart with negative values'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                series: {
                    cursor: 'pointer'
                }
            },
            series: [{
                name: 'John',
                data: [-1, -1, -1, -1, 2]
            }, {
                name: 'Jane',
                data: [2, -2, -3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, -2, 5]
            }]
        });
    });

Upvotes: 2

Views: 2774

Answers (1)

Gopinagh.R
Gopinagh.R

Reputation: 4916

If you are interested, you can do it a couple of ways.

Fix the position of tooltip

Fix the position of your tooltip, using tooltip positioner . 

        tooltip: {
        positioner: function () {
            return { x: 80, y: 50 };
        }

A working example is here.

Using followPointer

Using the follow pointer option. You can avoid the problem you are facing and allow the tooltip to be still floating. 

tooltip:{
            followPointer:true
        },

Another working example is here.

Upvotes: 6

Related Questions