Bar chart creating gap in timeline

Question

I created a bar chart using Highcharts with timeline in milliseconds. The timeline contains multiple series some with the same colors to indicate changes in status over time. For some reason, the chart creates a gap between successive points. The example chart can be seen here: https://jsfiddle.net/dh7q1emn/1/ (This is just a short extract showing the problem - the actual chart could have many more sections.)

I expect the "gap" part to be filled with orange toned color between the two red sections.

These are the Highchart settings and data:

Highcharts.chart('container', {
"chart": {
"zoomType": "x"
},
"credits": {
  "enabled": false
},
legend: {
  visible: false
},
"plotOptions": {
"line": {
  "linecap": "square",
  "lineWidth": 50,
  "marker": {
    "enabled": false
  }
},
"series": {
  "label": {
    "connectorAllowed": false,
    "enabled": false
  },
  "marker": {
    "enabled": false
  },
  "pointStart": 1566806513433,
  "showInLegend": false
}
},
   "series": [{
   "data": [
  [1566806513433, 2],
  [1566806659945, 2]
],
"color": "#f41930"
}, {
"data": [
  [1566806659945, 2],
  [1566806665051, 2]
],
"color": "#ff7843"
  }, {
"data": [
  [1566816565051, 2],
  [1566817251291, 2]
],
"color": "#f41930"
  }],
  "subtitle": {
"text": null
},
"title": {
"text": null
},
"tooltip": {
"enabled": true,
"pointFormat": "<tr><td>{series.name} </td>",
"reversed": true
},
"xAxis": {
"endOnTick": true,
"startOnTick": true,
"title": {
  "text": null
},
"type": "datetime"
},
"yAxis": {
"visible": false
}
});

What am I missing?

ppotaczek ppotaczek · Accepted Answer · 2019-08-27T10:23:09

You have wrong the x value. Please check the result with the corrected one:

"series": [{
    "data": [
        [1566806513433, 2],
        [1566806659945, 2]
    ],
    "color": "#f41930"
}, {
    "data": [
        [1566806659945, 2],
        [1566816565051, 2]  // correction
    ],
    "color": "#ff7843"
}, {
    "data": [
        [1566816565051, 2],
        [1566817251291, 2]
    ],
    "color": "#f41930"
}]

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

API Reference: https://api.highcharts.com/highcharts/series.line.data

Bar chart creating gap in timeline

1 Answers