Highcharts XRange Data and Label misalignment

Question

I'm trying to implement a timeline widget using Highcharts xrange chartType

The basic structure is YAxis Categories : Agent Name , X Axis Timeline data for Online/Offline/Break/etc

I've found that the YAxis labels don't align with the actual Bar for each category - the two solutions i found online were to use pointPadding/groupPadding which results in bars so thin as to be invisible. The alternative is defining pointWidth 20 to ensure that you can see each bar however there isn't protection for overlapping bars... LAME but solved by adding a YAxis Scrollbar -- HOWEVER this doesn't resolve that sometimes the label is halfway between bars, etc etc

it's kinda hard to replicate in the jsfiddle bc it's a statically sized graph rather than dynamically sized in my product but here is a good example of my current state https://jsfiddle.net/bj7y3dwv/5/#run

'yAxis': {
      'categories': agents,
      'min': 0,
      'max': agents.length < maxY ? agents.length - 1 : maxY,
      'scrollbar': {
        'enabled': true,
        'showFull': false,
        'barBackgroundColor': '#ccc',
        'barBorderRadius': 7,
        'barBorderWidth': 0,
        'buttonBorderWidth': 0,
        'buttonArrowColor': 'transparent',
        'buttonBackgroundColor': 'transparent',
        'rifleColor': 'transparent',
        'trackBackgroundColor': '#F3F3F3',
        'trackBorderColor': 'transparent',
        'height': 10,
        'minWidth': 25
      },
      'reversed': true,
      'tickmarkPlacement': 'on',
      'gridLineColor': 'transparent'
    },

Answer 1

This had to do with plotOptions grouping false which prevented highcharts from reserving space in each category for each series

Answer 2

Just set dataLabels.overflow = 'allow'. The default is "justify", which aligns labels inside the plot area.

Code:

series: [{
  data: [{
    ...
  }],
  dataLabels: {
    enabled: true,
    overflow: 'allow',
    crop: true
  }
}]

Demo:

• https://jsfiddle.net/BlackLabel/apxft8kj/