Right and center alignment for yAxis not working properly in gantt chart from highcharts

Question

I want to customize series on the yAxis as right/left/center. with below property I am able to achieve it

  yAxis : {
       uniqueNames: true,
       labels: {
          align: 'right', // center, left, or right
        }, 
    },

But this works fine for left alignment only. And for center and right I get this this below UI you can see in image

Am I missing anything here? or this how alignment works? Please suggest me some fix for this issue. Here is my demo code for the same.

https://codepen.io/manshi44/pen/KKrzOGy?editors=1111

Answer 1

This seems to be a bug, it would be best to report it on the official Highcharts repository: https://github.com/highcharts/highcharts/issues/new/choose

However, it is possible to work around this by moving the labels using CSS:

labels: {
  align: 'right',
  style: {
    transform: 'translateX(-35px)'
    }
}

Workaround demo: https://jsfiddle.net/BlackLabel/m4nhxe68/