Highcharts Gantt milestone series - highcharts

Question

I'm new to Highcharts and have been experimenting with the Gantt chart type, unfortunately there isnt a whole heap of documentation around right now.
My requirement is quite basic, I need to plot multiple series of milestones in order to show slippage of different projects. I've used some example code I found online to start me off however I need to remove the blank ('My 1st Row') line between the series. see:-
https://jsfiddle.net/z86aq99g
var today = new Date(),
day = 1000 * 60 * 60 * 24;
var grey_OrigTargDate = '#A6A6A6';
var blue_Completed = '#2e75b6';
var green_Ontarget = '#00b050';
var yellow_OfftrackMinor = '#ffc000';
var red_OffTrackMajor = '#ff0000';
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
// THE CHART
Highcharts.setOptions({
colors: ['#058DC7']
});
Highcharts.ganttChart('container', {
title: {
text: 'Gantt Chart Test'
},
xAxis: {
currentDateIndicator: true,
min: today - 3 * day,
max: today + 18 * day
},
series: [{
name: 'Test series',
data: [{
taskName: 'My 1st row',
id: 'r1',
start: today + 4.5 * day,
milestone: true,
color: grey_OrigTargDate
}, {
taskName: 'My 1st row',
id: 'r2',
start: today + 7.5 * day,
milestone: true,
color: green_Ontarget
}, {
taskName: 'My 2nd row',
id: 'r3',
start: today + 9.5 * day,
milestone: true,
color: blue_Completed
}, {
taskName: 'My 2nd row',
id: 'r4',
start: today + 11.5 * day,
milestone: true,
color: red_OffTrackMajor
}]
}]
});
I am trying to chart 2 milestones on each line. I know that the x range series chart could accomplish something similar but I'd much prefer to use the gantt option. I'd appreciate any help.

Answer 1

You can solve this problem by assigning categories to the Y-axis
yAxis: {
type: 'category',
categories: ['A', 'B'],
reversed: true,
},
In order for this to work you could change the taskName with y: 0 / y: 1. It will work if your taskName is identical to your category names, but using y: 0 is more dynamic if you were to change the categories.
Your code will look like this in the end:
var today = new Date(),
day = 1000 * 60 * 60 * 24;
var grey_OrigTargDate = '#A6A6A6';
var blue_Completed = '#2e75b6';
var green_Ontarget = '#00b050';
var yellow_OfftrackMinor = '#ffc000';
var red_OffTrackMajor = '#ff0000';
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
// THE CHART
Highcharts.setOptions({
colors: ['#058DC7']
});
Highcharts.ganttChart('container', {
title: {
text: 'Gantt Chart Test'
},
xAxis: {
currentDateIndicator: true,
min: today - 3 * day,
max: today + 18 * day
},
yAxis: {
type: 'category',
categories: ['A', 'B'],
reversed: true,
},
series: [{
name: 'Test series',
data: [{
y: 0, // taskName: 'A' works too
id: 'r1',
start: today + 4.5 * day,
milestone: true,
color: grey_OrigTargDate
}, {
y: 0,
id: 'r2',
start: today + 7.5 * day,
milestone: true,
color: green_Ontarget
},{
y: 1,
id: 'r3',
start: today + 9.5 * day,
milestone: true,
color: blue_Completed
}, {
y: 1,
id: 'r4',
start: today + 11.5 * day,
milestone: true,
color: red_OffTrackMajor
}]
}]
});
Here is a working JSFiddle https://jsfiddle.net/z86aq99g/1/