Highcharts - 如何删除固定工具提示和点之间的连接线

Question

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.

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.

Answer 1

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, eg 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/

Answer 2

The accepted answer only partially worked in Highstock. The connectors for the volume and indicator tooltips were suppressed, but I still had a connector from the DateTime box to the crosshair.

As an alternative to the shape: 'rect' hack, you can try:

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

These split: and shared: settings consolidate all the tooltip boxes into a single box. Provided that this meets your needs it seems to solve the connector issue.

Very odd design decision by Highcharts. The connectors are highly intrusive visually and I can't imagine that many designers will want to use them, but you can only disable them with a hack. What were they thinking?