Highcharts annotations outside the plot area incorrectly placed - highcharts

Question

I want to place annotations on the y-axis but outside of the plot area. These should be placed with a connector (callout) at the same height as the PlotLines.
However, the settings do not work correctly there (see image - the red one). The alignment should be horizontal 'right' and vertical 'centered'. So that the connector on the right side is on the axis.
annotations: [{
labelOptions: {
align: 'right',
verticalAlign: 'middle',
//distance: 0,
overflow: 'allow',
crop: false
},
labels: [{
point: {
x: -6,
y: 273,
yAxis: 0
},
format: 'wrong right middle'
}]
}]
Distance gives a wrong result. If activate this the annotation jumps to another position. It just seems to work for vertical displacement.
My current workaround is, I add a callout as css style. But this is not the way to go.
https://jsfiddle.net/xreality/dskfv986/
Thanks
Maik

Answer 1

Highcharts annotations use callout symbol (Highcharts.SVGRenderer.prototype.symbols.callout) by default which is not designed for this usage. However, you can modify it so that it fits your needs. Check my wrap posted below and demo with it.
Wrapper on Highcharts.SVGRenderer.prototype.symbols.callout method:
(function(H) {
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
];
// Anchor on right side
if (anchorX && anchorX > w) {
// Chevron
if (
anchorY > y + safeDistance &&
anchorY < y + h - safeDistance
) {
path.splice(13, 3,
'L', x + w, anchorY - halfDistance,
x + w + arrowLength, anchorY,
x + w, anchorY + halfDistance,
x + w, y + h - r
);
// Simple connector
} else {
path.splice(13, 3,
'L', x + w, h / 2,
anchorX, anchorY,
x + w, h / 2,
x + w, y + h - r
);
}
// Anchor on left side
} else if (anchorX && anchorX < 0) {
// Chevron
if (
anchorY > y + safeDistance &&
anchorY < y + h - safeDistance
) {
path.splice(33, 3,
'L', x, anchorY + halfDistance,
x - arrowLength, anchorY,
x, anchorY - halfDistance,
x, y + r
);
// Simple connector
} else {
path.splice(33, 3,
'L', x, h / 2,
anchorX, anchorY,
x, h / 2,
x, y + r
);
}
} else if ( // replace bottom
anchorY &&
anchorY > h &&
anchorX > x + safeDistance &&
anchorX < x + w - safeDistance
) {
path.splice(23, 3,
'L', anchorX + halfDistance, y + h,
anchorX, y + h + arrowLength,
anchorX - halfDistance, y + h,
x + r, y + h
);
} else if ( // replace top
anchorY &&
anchorY < 0 &&
anchorX > x + safeDistance &&
anchorX < x + w - safeDistance
) {
path.splice(3, 3,
'L', anchorX - halfDistance, y,
anchorX, y - arrowLength,
anchorX + halfDistance, y,
w - r, y
);
} else { // add to support right arrows
path.splice(13, 3,
'L', x + w, anchorY - halfDistance,
x + w + arrowLength, anchorY,
x + w, anchorY + halfDistance,
x + w, y + h - r
);
}
return path;
}
})(Highcharts);
Demo:
https://jsfiddle.net/BlackLabel/0eydz6q3/
EDIT
For annotations that are dynamically added, we can use chart.events.render to get each element dimensions using SVGElement.getBBox() method and calculate appropriate offsets using particular annotation width and height. Nextly we have to remove the old annotations using chart.removeAnnotations('id') method and add new ones (with updated distance and x position) using chart.addAnnotations(newOptions). Check the demo posted below.
chart: {
events: {
render: function() {
var chart = this,
annotations = chart.annotations[0],
options = annotations.userOptions,
labels = options.labels,
arrowWidth = 6,
bbox;
labels.forEach(function(label, i) {
if (label.point.x === 0) {
bbox = annotations.labels[i].getBBox();
label.point.x = -(bbox.width / 2 + arrowWidth);
label.distance = -bbox.height / 2;
}
});
chart.removeAnnotation('annotations-id');
chart.addAnnotation(options);
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/wf8q1odj/1/
Api reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#getBBox
https://api.highcharts.com/class-reference/Highcharts.Chart#removeAnnotation
https://api.highcharts.com/class-reference/Highcharts.Chart#addAnnotation