Search code examples
highchartsreact-highchartshighcharts-gantt

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


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

Right alignment 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

Solution

  • 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/