HighCharts: align rotated multiline label - css

Question

I'm trying to align axis labels in HighCharts
Labels should not be trimed, so ellipsis is not allowed
How it looks now:
How I want it to be:
Code: https://jsfiddle.net/9xw6dL3f/25/
{
"chart": {
"width": 500,
"height": 300,
"type": "column"
},
"title": {
"text": null
},
"xAxis": {
"type": "category",
"labels": {
"rotation": -90,
"style": {
"textOverflow": "none"
}
}
},
"series": [
{
"name": "",
"data": [
{ "name": "Follow me into my theatre of lunacy", "y": -10, "color": "#ABC" },
{ "name": "1", "y": 1, "color": "#000" },
{ "name": "2", "y": 2, "color": "#000" },
{ "name": "3", "y": 3, "color": "#000" },
{ "name": "4", "y": 4, "color": "#000" },
{ "name": "5", "y": 5, "color": "#000" },
]
}
]
}

Answer 1

It is possible to move label depending on it's rows count
Add render function to the chart object
{
"chart": {
...
events: {
render() {
for (let i = 0; i < this.xAxis[0].names.length; i++) {
const label = this.xAxis[0].ticks[i].label;
const rows = (label.element.innerHTML.match(/<\/tspan>/g) || []).length;
label.translate(-8 * rows, 0);
}
}
}
where 8 is half of row size in px
https://jsfiddle.net/kLz1uoga/5/