0

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

Poncher
  • 53
  • 6

2 Answers2

0

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:

Wojciech Chmiel
  • 7,302
  • 1
  • 7
  • 16
  • unfortunately that's not quite what i was looking for - here is a better example of what i'm seeing - also note it's the yAxis labels i'm trying to align properly not the dataLabels for the given bars – Poncher Mar 12 '19 at 19:09
  • added a picture to the question for clarity @wojciech-chmiel – Poncher Mar 12 '19 at 20:39
  • Ok, I see. I was wrong because the demo doesn't show the issue. It looks strange, is it possible to reproduce it better? Have you tried to move the labels using `yAxis.labels.y` - https://api.highcharts.com/highcharts/yAxis.labels.y? – Wojciech Chmiel Mar 13 '19 at 08:52
  • I am having trouble reproducing it on jsfiddle - it seems to get worse the more you scroll down on the y axis - I don't believe the yAxis.labels.y will work since that would be a static value rather than an align middle or other dynamic attribute – Poncher Mar 13 '19 at 15:02
  • it seems to be that the bars are the portion that are misaligned since the labels are perfectly between the tick marks (when i disable the attribute I have making them transparent) – Poncher Mar 13 '19 at 15:05
  • Unfortunately, it's hard to say what's wrong with it without a demo. Have you tried other series like stacked bar: https://www.highcharts.com/demo/bar-stacked? Perhaps you can use them instead of x-range. – Wojciech Chmiel Mar 14 '19 at 06:30
  • i agree - wish i could give you a link to the actual product - one of the things that's making this super hard to debug/fix is that i can only reproduce it within our product and not through jsfiddle - an xrange graph is really the best option for the "Timeline" like graph i'm looking for - it's really a well put together widget w/ the one caveat that my UX ppl are not thrilled with the misalignment bug – Poncher Mar 14 '19 at 15:41
  • @WojciechChmiel I can reproduce the issue in this fiddle https://jsfiddle.net/BlackLabel/trxjw4np/. The series (blue) dows not vertically align with the label '0' – Allan Jebaraj Oct 16 '20 at 12:35
0

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

Poncher
  • 53
  • 6