HighCharts: Annotation on X axis? - highcharts

Question

A picture is better than words:
Annotation just above or below the X Axis
How can I obtain the y coordinate of these annotations?
Here is the code so far, with a dummy y:
var chart = Highcharts.chart('container', {
series: [{
data: [29.9, 71.5, 106.4, -129.2, -144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
var LineVal = 5.5;
// the button action
$button = $('#button');
$button.click(function() {
chart.xAxis[0].addPlotLine({
value: LineVal,
color: 'red',
width: 2,
id: 'plot-line-1'
});
chart.addAnnotation({
labels: [{
point: {
x: LineVal,
xAxis: 0,
y: 0,
yAxis:0
},
text: LineVal.toFixed(2),
backgroundColor: 'black'
}],
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Add plot line</button>
jsfiddle

Answer 1

I think that a better solution will be using the chart.renderer tool to render a label which could be dynamically placed.
Demo: http://jsfiddle.net/BlackLabel/0e4vrytc/
let label = chart.renderer.label(LineVal, 0, 0, 'callout', 17.5, -50)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
label.translate(chart.xAxis[0].toPixels(LineVal) - label.getBBox().width / 2, chart.plotHeight + chart.plotTop)
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label