Search code examples
highchartsvertical-alignmentxrange

Highcharts XRange Data and Label misalignment

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'
    },

example of yAxis to data misalignment

Solution

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