score:0

Accepted answer

You don't have to categorize yAxis - you can display proper yAxis labels using yAxis.labels.formatter function:

var yAxisCategories = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth']
yAxis: {
 labels: {
   formatter() {
     return yAxisCategories[this.pos]
   }
 }
},

jsFiddle with formatter

If you'd like to stick with categorized yAxis, you can manually move xAxis closer to they yAxis 0 value using xAxis.offset property together with yAxis.tickmarkPlacement 'on' property. In this example, I have put -34px rigidly, but you can calculate the proper value in chart.load event and then update calculated offset.

xAxis: {
  type: 'category',
  offset: -34
},

yAxis: {
  type: 'category',
  categories: ["First", "Second", "Third", "fourth", "fifth"],
  tickmarkPlacement: 'on'
},

jsFiddle with offset

If you want to try a different approach, let me know - I will edit my answer.

API References:

 https://api.highcharts.com/highcharts/yAxis.labels.formatter
 https://api.highcharts.com/highcharts/yAxis.tickmarkPlacement
 https://api.highcharts.com/highcharts/xAxis.offset

Related Query

More Query from same tag