Search code examples
javascriptjquerysvghighchartstooltip

Highcharts column tooltip - always on top + fit the container

I have a highchart graph with tooltips. This is how I want to render tooltips every time.

good case

When the tootlip doesn't fit the svg container, highcharts swaps the position of tooltip like this.

bad case

I know how to fix this but when I do this.

positioner: function(boxWidth, boxHeight, point) {
    return {
        x: point.plotX,
        y: point.plotY - boxHeight
    };
},

Tooltip is correctly always on top, but overflows to the right(image_1). I would like to have the tooltip always on top + fit the container from the sides. (image_2)

enter image description here

enter image description here

Is there any easy way to achieve this?

Thanks (http://jsfiddle.net/4xomw3aj/)

Solution

  • Ok I just found out how to 'not swap'. In Tooltip.getPosition()

    firstDimension = function (dim, outerSize, innerSize, point) {
    ret[dim] = point - distance - innerSize;
},