HighCharts: align rotated multiline label

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/