I am struggling with a highcharts gantt chart.
The bars of the gantt chart are not vertically aligned. Some of the bar are aligned to the top, other to the bottom. I need those bars to be vertically centered.
I created a fiddle for this: jsfiddle
My highcharts config looks like this:
{
"chart":{
"type":"xrange",
"width":"1200",
"height":"500"
},
"credits":{
"enabled":"true",
"text":"(c) ???"
},
"title":{
"text":""
},
"xAxis":{
"type":"datetime",
"startOnTick":"true",
"endOnTick":"true",
"minPadding":"0",
"maxPadding":"0",
"tickInterval":"3600000",
"minTickInterval":"3600000",
"plotBands":[
{
"color":"rgba(0, 0, 0, 0.0)",
"label":{
"text":279
},
"from":1713765602000,
"to":1713775407000
},
{
"color":"rgba(0, 124, 176, 0.1)",
"label":{
"text":280
},
"from":1713775407000,
"to":1713780248000
},
{
"color":"rgba(0, 0, 0, 0.0)",
"label":{
"text":281
},
"from":1713780248000,
"to":1713784897000
},
{
"color":"rgba(0, 124, 176, 0.1)",
"label":{
"text":282
},
"from":1713784897000,
"to":1713788101000
},
{
"color":"rgba(0, 0, 0, 0.0)",
"label":{
"text":283
},
"from":1713788101000,
"to":1713808800000
}
],
"gridLineWidth":1,
"min":1713765600000,
"max":1713808800000
},
"yAxis":{
"title":"",
"categories":[
"Category 1",
"Category 2",
"Category 3",
"Category 4",
"Category 5",
"Category 6",
"Category 7",
"Category 8",
"Category 9",
"Category 10",
"Category 11"
],
"reversed":"true"
},
"tooltip":{
"enabled":"false"
},
"series":[
{
"name":"Category 1",
"borderRadius":0,
"pointWidth":10,
"data":[
{
"x":1713775407000,
"x2":1713777567000,
"ring":280,
"y":0,
"annotation":""
},
{
"x":1713780248000,
"x2":1713782337000,
"ring":281,
"y":0,
"annotation":""
},
{
"x":1713784887000,
"x2":1713786487000,
"ring":282,
"y":0,
"annotation":""
},
{
"x":1713786777000,
"x2":1713787357000,
"ring":282,
"y":0,
"annotation":""
},
{
"x":1713788101000,
"x2":1713790209000,
"ring":283,
"y":0,
"annotation":""
}
],
"color":"rgba(0,124,176,1.0)"
},
{
"name":"Category 2",
"borderRadius":0,
"pointWidth":10,
"data":[
{
"x":1713775517000,
"x2":1713777600000,
"ring":280,
"y":1,
"annotation":""
},
{
"x":1713780387000,
"x2":1713782357000,
"ring":281,
"y":1,
"annotation":""
},
{
"x":1713784957000,
"x2":1713786517000,
"ring":282,
"y":1,
"annotation":""
},
{
"x":1713788467000,
"x2":1713795707000,
"ring":283,
"y":1,
"annotation":""
}
],
"color":"rgba(212,215,0,1.0)"
},
{
"name":"Category 3",
"borderRadius":0,
"pointWidth":10,
"data":[
{
"x":1713774648000,
"x2":1713774708000,
"ring":279,
"y":2,
"annotation":""
},
{
"x":1713774777000,
"x2":1713775247000,
"ring":279,
"y":2,
"annotation":""
},
{
"x":1713779637000,
"x2":1713780147000,
"ring":280,
"y":2,
"annotation":""
},
{
"x":1713784177000,
"x2":1713784698000,
"ring":281,
"y":2,
"annotation":""
},
{
"x":1713787477000,
"x2":1713787998000,
"ring":282,
"y":2,
"annotation":""
}
],
"color":"rgba(211,211,211,1.0)"
},
{
"name":"Category 4",
"borderRadius":0,
"pointWidth":10,
"data":[
{
"x":1713792600000,
"x2":1713808800000,
"ring":283,
"y":3,
"annotation":"Category 8",
"label":"19"
}
],
"color":"rgba(0,117,0,1.0)",
"dataLabels":{
"enabled":"true",
"inside":"true",
"format":"{point.label}"
}
},
{
"name":"Head Category",
"borderRadius":0,
"pointWidth":10,
"data":[
{
"x":1713765600000,
"x2":1713766500000,
"ring":279,
"y":-6+10,
"annotation":"Category 5",
"label":"1"
},
{
"x":1713766500000,
"x2":1713774660000,
"ring":279,
"y":-6+11,
"annotation":"Category 6",
"label":"2"
},
{
"x":1713767400000,
"x2":1713771000000,
"ring":279,
"y":-6+12,
"annotation":"Category 7",
"label":"3"
},
{
"x":1713767400000,
"x2":1713771000000,
"ring":279,
"y":-6+13,
"annotation":"Category 8",
"label":"4"
},
{
"x":1713775260000,
"x2":1713775380000,
"ring":279,
"y":-6+10,
"annotation":"Crew delays related to people",
"label":"6"
},
{
"x":1713775380000,
"x2":1713807600000,
"ring":279,
"y":-6+14,
"annotation":"Category 5",
"label":"7"
},
{
"x":1713777540000,
"x2":1713779640000,
"ring":279,
"y":-6+11,
"annotation":"Category 9",
"label":"8"
},
{
"x":1713780120000,
"x2":1713780240000,
"ring":280,
"y":-6+10,
"annotation":"Category 6",
"label":"9"
},
{
"x":1713780120000,
"x2":1713782340000,
"ring":280,
"y":-6+10,
"annotation":"Category 5",
"label":"10"
},
{
"x":1713782340000,
"x2":1713784200000,
"ring":281,
"y":-6+11,
"annotation":"Category 5",
"label":"11"
},
{
"x":1713784680000,
"x2":1713784860000,
"ring":281,
"y":-6+10,
"annotation":"Category 6",
"label":"12"
},
{
"x":1713786480000,
"x2":1713786780000,
"ring":281,
"y":-6+15,
"annotation":"Category 5",
"label":"13"
},
{
"x":1713787380000,
"x2":1713787500000,
"ring":282,
"y":-6+10,
"annotation":"Category 10",
"label":"14"
},
{
"x":1713787980000,
"x2":1713788100000,
"ring":282,
"y":-6+10,
"annotation":"Category 5",
"label":"15"
},
{
"x":1713790200000,
"x2":1713808800000,
"ring":282,
"y":-6+10,
"annotation":"Category 5",
"label":"16"
},
{
"x":1713790200000,
"x2":1713792600000,
"ring":283,
"y":-6+16,
"annotation":"Category 5",
"label":"17"
},
{
"x":1713790800000,
"x2":1713793200000,
"ring":283,
"y":-6+13,
"annotation":"Category 11",
"label":"18"
}
],
"color":"rgba(235,0,63,1.0)",
"dataLabels":{
"enabled":"true",
"inside":"true",
"format":"{point.label}"
}
}
],
"navigation":{
"buttonOptions":{
"enabled":"false"
}
}
}
I tried this solution but I was not able to make it work: Combine series to one
Thank you for the support.
Just remove "type":"xrange" from your config - it is not necessary when using ganttChart constructor.