Highcharts zIndex of dataLabel vs renderer.rect vs tooltip - highcharts

Question

I'm struggling to get my chart elements in the right Z order, in particular where I have dataLabels with useHTML enabled, and where I also add a rectangle via chart.renderer.rect(). This is illustrated in the following jsfiddle:
https://jsfiddle.net/fk7b3cnz/
I want the rectangle to be above the main chart features (lines, labels), and for the tooltip to be above the rectangle (i.e. above everything). I managed to get the tooltip to sit on top (except for the margin around it... how do I fix that?), but the data labels are sitting above the rectangle... the zIndex I set for the rectangle doesn't seem to have any effect.
JAVASCRIPT:
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
tooltip: {
useHTML: true,
formatter: function () {
return '<div class="tooltip">value: ' + this.y + '</div>';
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
useHTML: true // need this to achieve the text formatting I want via appropriate html (not shown here)
}
}
},
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]
}]
}, function (chart) { // on complete
chart.renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 9998 // want this to be above chart features but below tooltip
})
.add();
});
CSS:
.highcharts-tooltip span {
background-color: white;
border: 1px solid green;
opacity: 1;
z-index: 9999;
}
.tooltip {
padding: 5px;
}
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

Answer 1

Instead of adding zIndex manually you can use Highcharts.SVGElement.toFront method. The rectangle will be plotted above lines and other svg elements. However, data labels that are created using HTML will be always above other SVG elements (Since Highcharts v6.1.1 tooltip can be plotted above HTML content) as you can read in the Highcharts documentation:
"It will always be laid out on top of all other SVG content.
Specifically the tooltip may be rendered below the useHTML label.
Since Highcharts v6.1.1 this can be avoided by setting tooltip.outside
to true."
chart.renderer.rect(100, 100, 100, 100, 5)
.attr({
'stroke-width': 2,
stroke: 'red',
fill: 'yellow'
})
.add()
.toFront();
Demo:
jsfiddle