Hightcharts Avoid “jump effect” on tooltip with “shared:true”

Question

I would like to avoid what I call "jump effect" with the tooltip when the cursor is hover a stacked column. Here is an example of the problem I encounter : http://jsfiddle.net/ewget3wd/ -> I have a stacked column, I want ONE unique tooltip for a stacked column, but as you can see on my example, the tooltip jumps from one bar to the others.

I would like to avoid this "jump effect" and have one shared tooltip. I tried the parameter shared:true but as you can see on the following example, the small arrow of the tooltip disapeared : http://jsfiddle.net/5rktjo4g/

To sum up, I would like to have one tooltip that point (with an arrow) on the top of my stacked column.

So here is my question, is it possible ? :-)

Thanks.

Answer 1

You can used shared property of your tooltip and use positioner for positioning your tooltip. Here you can find code that may help you:

  positioner: function(labelWidth, labelHeight, point) {
    return {
      x: point.plotX + labelWidth / 2,
      y: point.plotY - labelHeight / 2
    }
  },

You can add the connector by wrapping function responsible for drawing your tooltip shape:

(function(Highcharts) {
    Highcharts.Renderer.prototype.symbols.callout = function(x, y, w, h, options) {
      var arrowLength = 6,
        halfDistance = 6,
        r = Math.min((options && options.r) || 0, w, h),
        safeDistance = r + halfDistance,
        anchorX = options && options.anchorX,
        anchorY = options && options.anchorY,
        path;

      path = [
        'M', x + r, y,
        'L', x + w - r, y, // top side
        'C', x + w, y, x + w, y, x + w, y + r, // top-right corner
        'L', x + w, y + h - r, // right side
        'C', x + w, y + h, x + w, y + h, x + w - r, y + h, // bottom-right corner
        'L', x + r, y + h, // bottom side
        'C', x, y + h, x, y + h, x, y + h - r, // bottom-left corner
        'L', x, y + r, // left side
        'C', x, y, x, y, x + r, y // top-right corner
      ];

      //bottom arrow
      path.splice(23, 3,
        'L', w / 2 + halfDistance, y + h,
        w / 2, y + h + arrowLength,
        w / 2 - halfDistance, y + h,
        x + r, y + h
      );
      return path;
    };
  }(Highcharts));

Here you can see an example how it can work: http://jsfiddle.net/ewget3wd/4/