Search code examples
jqueryhighchartstooltipscatter-plot

avoid tooltip linking line in a HighCharts scatterplot

Consider the following script:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',
        },
        plotOptions: {
            scatter: {
                lineWidth:1,
                marker: {
                    radius: 1,
                    symbol:'circle',
                    fillColor: '#800000'
                },
            }
        },
  tooltip: {
            enabled:true,
            formatter: function() {
            return "<b>"+this.y+"</b>";
                },
        positioner: function () {
            return { x: 80, y: 50 };
        },
        },
    series: [{
        name: 'A',
        color: "#b0b0b0",
        data: [[38,42],[39,39],[35,45],[35,54],{x:36,y:35}]
        }, {
        name: 'B',
        color: "#b0b0b0",
        data: [[46,56],[47,67],[48,69],[50,55],{x:52,y:57}]
    }]
});
var chart=$('#container').highcharts();
});

Hovering a data point, it appears a line linking it with its tooltip. If I comment the last line (var chart=$('#container').highcharts();) the linking line disappears, but I need to instance the chart. Is it possible to avoid such linking line?

Solution

  • You can set the shape of your tooltip.

    By default, the shape is callout, which results in the pointer from the tooltip to the data point.

    If you set the shape to square instead, you will not have the connecting line:

    tooltip: {
  enabled: true,
  shape: 'square',
  formatter: function() {
    return "<b>" + this.y + "</b>";
  },
  positioner: function() {
    return {
      x: 80,
      y: 50
    };
  },
}

    Updated Fiddle:

    This avoids changing the border or shadow properties, so you are free to style those elements however you want.