Search code examples
bar-charthighchartstreemaps

Highcharts - How to remove connecting line between fixed tooltip and point

We've just updated to the latest Highcharts version and now a few of our chart types have a new line connecting the tooltip to the point.

It's mainly obvious on charts with fixed tooltips.

Does anyone know how to remove this line without removing the border of the tooltip itself?

I have come up with a work around that involves setting the borderwidth of the tooltip to 0 and adding a rounded, bordered, coloured div to the tooltip using useHTML:true and disabling the shadow.

Though I dont want to do this for every chart as it seems a bit nasty.

This also affects bar and tree maps that I can see and I've trawled the documentation to no avail.

Connecting Line

http://jsfiddle.net/mattscotty/bqw4bc4x/1/

Highcharts.chart('container', {
title: {
    text: 'Fixed tooltip'
},

tooltip: {
    positioner: function () {
        return { x: 80, y: 50 };
    },
    backgroundColor: 'rgba(255,255,255,0.8)',

    //Uncomment below to remove line, but this also removes tooltip border
    //borderWidth:0,
    //shadow:false
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar']
},

series: [{
    data: [29.9, 71.5, 106.4]
}, {
    data: [194.1, 95.6, 54.4]
}]
});

Thanks in advance.

Solution

  • By default tooltip's shape is set to a callout which has a chevron/line pointing to the point. You can change the tooltip's shape to, e.g. rectangle - which does not have any connector.

    tooltip: {
    positioner: function () {
        return { x: 80, y: 50 };
    },
    backgroundColor: 'rgba(255,255,255,0.8)',
    shape: 'rect'

    example: http://jsfiddle.net/bqw4bc4x/2/