Highcharts: make tooltip's arrow (anchor) always visible

1
votes

I'm trying to build a column chart with a custom tooltip position using Highcharts. I want to make tooltip's arrow (anchor) always visible at the bottom of the tooltip. For now it's only visible when I remove the custom tooltip positioner function. I've tried to override the move method of the Tooltip class and set skipAnchor to false there. However, it didn't work.

Please see the example: https://jsfiddle.net/jezusro6/

1
javascriptchartshighchartsdata-visualizationangular2-highcharts

1 Answers

0
votes

You should overwrite the callout symbol method:

H.SVGRenderer.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-rgt
        '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-left corner
    ];

    path.splice(
        23,
        3,
        'L', anchorX + halfDistance, y + h,
        anchorX, y + h + arrowLength,
        anchorX - halfDistance, y + h,
        x + r, y + h
    );

    return path;
}

Live demo: https://jsfiddle.net/BlackLabel/g5h27mfx/

Docs: https://www.highcharts.com/docs/extending-highcharts