1

I have an xrange graph where each 'Agent' has a series of Timeline Data, i am having several problems getting the out of the box attributes to format the graph data appropriately. For instance when there are many Series / Y categories the bar height on any given point element is 0; or when there are few enough to actually get a height they aren't centered in the category

is getting a height of 0, this can be solved by using the pointWidth attribute but my GOAL is to use the pointPadding and groupPadding attributes to center the bar && label within the category / Agent section - one would think this would be an easy task and the fiddle https://jsfiddle.net/yd7ujvfs/ shows an ideal end w/ maybe a minWidth if possible

in order to replicate my problem in a jsfiddle i stringified my chart definition and loaded it onto the jsfiddle here https://jsfiddle.net/0yeu4bg6/4/ which shows the height 0 problem

Additionally i'd like to handle the few agents case and more perfectly center the bar within the category as shown in this jsfiddle https://jsfiddle.net/5kowvgz3/5/

Thank you in advance for your assistance!

Examples: example of perfectly centered labels with non centered data example of 0 height data due to many series ~ > 10 I've tried fiddling with the pointPadding, groupPadding solution vs the pointWidth solution, additionally i've tried to fiddle with the label placement and aligning it to the bar instead of visa versa. Additionally i've experimented with pointPlacement but no joy there

plotOptions: {
  series: {
    minPointLength: 10,
    borderRadius: 0,
    pointPadding: 0,
    groupPadding: .25
  }
},

{
  name: "Adam NonSDX x",
  id: 1003043,
  data: [
     {
       y: 0,
       agentDisplayName: "Adam NonSDX x",
       tooltipDisplay: "Mon, Apr 1 1:14 PM - 2:59 PM",
       name: "Available",
       x: 1554142440000,
       x2: 1554148752857,
       color: "#97e34c"
     },
        ...
   pointPlacement: "on",
   dataLabels: {
     enabled: false
   }
}

Expected results, Perfectly centered Axis Label and Bar within each category, Ideally a set px for each category like 35 px where there is 10px of padding on top and bottom and the label and bar are the middle 25px

actual results, Labels perfectly centered but bar is inconsistently placed, additionally at larger data sets bar is not visible because height is getting set to 0

4

1 回答 1

1

Highcharts reserves space for each series in each category. To prevent that disable grouping option:

plotOptions: {
    series: {
        grouping: false,
        ...
    }
},

Live demo: https://jsfiddle.net/BlackLabel/xpztou4g/

API Reference: https://api.highcharts.com/highcharts/plotOptions.xrange.grouping

于 2019-04-03T10:29:34.847 回答