Highcharts pie chart annotations are not centering - highcharts

Question

I have 2 pie charts rendered next to each other corresponding 2 series. I want to add a title under each series, but don't want to use the title property, because each Highcharts component only gets one title. I've opted to use annotations and that is working, which requires me to manually specify the x and y coordinates for the annotation labels. I'm using a formula to calculate these exact positions. However, when I render the annotations, they don't seem to exactly line up in the middle of each chart.
My chart options look like this:
const width = 700
const height = 200
Highcharts.chart('container', {
chart: {
type: 'pie',
width,
height
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
}
}
},
annotations: [{
labels: [{
point: {
x: 0.33 * width,
y: height
},
text: "centered"
}]
}, {
labels: [{
point: {
x: 0.635 * width,
y: height
},
text: "also centered"
}]
}],
series: [
{
center: ['33%', '50%'],
type: 'pie',
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
},
{
center: ['66%', '50%'],
type: 'pie',
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]
}]
});
Here's what it looks like now: https://jsfiddle.net/0cfztdms/
And here's what I want to achieve without hardcoding the x positions:
Pie charts with centered annotations

Answer 1

I think that a better solution will be rendering the custom label via using SVGRendere tool than using the annotation feature.
Demo: https://jsfiddle.net/BlackLabel/L08bvngk/
render() {
let chart = this;
chart.series.forEach((s, i) => {
if (chart['label' + i]) {
chart['label' + i].destroy();
}
chart['label' + i] = chart.renderer.label('testtestestest', 0, 0)
.css({
color: '#FFFFFF'
})
.attr({
fill: 'rgba(0, 0, 0, 0.75)',
padding: 8,
r: 5,
zIndex: 6
})
.add();
//center the label
chart['label' + i].translate(s.center[0] + chart.plotLeft - chart['label' + i].getBBox().width / 2, chart.plotHeight)
})
}
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
API: https://api.highcharts.com/highcharts/chart.events.render

Answer 2

I figured out a way to center my labels without having to do the manual calculations using Highcharts annotations module. Set anchorX = 'center' and anchorY = 'middle' (these props are from the annotations module) will automatically center the annotations for you. Read more here
const width = 600;
annotations: [{
labels: [{
point: {
x: (1 / numberOfCharts + 1) * width,
y: 200,
anchorX: 'center',
anchorY: 'middle'
},
text: 'Label 1'
}, {
point: {
x: (1 / numberOfCharts + 1) * 2 * width,
y: 200,
anchorX: 'center',
anchorY: 'middle'
},
text: 'Label 2'
}
}]