Highchart gantt chart no overlapping - highcharts

Question

I need help to create a Hichart gantt with out overlapping the bar. need to have the data grouped and not to overlap each other. EX:
Resource 1 Task A and Task B over lap each other, is there any possibility to place Task B below Task A or any other ideas?
Fiddle
series: [{
name: 'Resource 1',
data: [{
name: 'Task A',
y: 0,
start: today - (2 * day),
end: today + (6 * day)
}, {
name: 'Task B',
y: 0,
start: today - (3 * day),
end: today + (6 * day),
color: 'rgba(140, 140, 140, 0.7)'
}, {
name: 'Task C',
y: 0,
start: today + (13 * day),
end: today + (17 * day)
}]
}

Answer 1

Unfortunately, this feature is not supported yet. However, the workaround is to use yAxis.breaks to make the first category bigger. Then, each point from this category has to be translated to be centered. Check the code and demo posted below.
Code:
var today = new Date(),
day = 1000 * 60 * 60 * 24;
// 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.ganttChart('container', {
chart: {
events: {
load: function() {
var chart = this,
series = chart.series[0];
series.points.forEach(function(point) {
point.graphic.translate(0, -25);
});
}
}
},
title: {
text: 'Grouping tasks vertically'
},
yAxis: {
categories: ['Resource 1', 'Resource 2', 'Resource 3'],
breaks: [{
breakSize: 0.5,
from: 0,
to: 0
}]
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Resource 1',
data: [{
name: 'Task A',
y: 0,
start: today - (2 * day),
end: today + (6 * day)
}, {
name: 'Task B',
y: 0.6,
start: today - (1 * day),
end: today + (6 * day),
color: 'rgba(140, 140, 140, 0.7)'
}, {
name: 'Task C',
y: 0,
start: today + (13 * day),
end: today + (17 * day)
}]
}, {
name: 'Resource 2',
data: [{
name: 'Task D',
y: 1,
start: today - (1 * day),
end: today + (6 * day)
}, {
name: 'Task E',
y: 1,
start: today + (7 * day),
end: today + (9 * day)
}, {
name: 'Task F',
y: 1,
start: today + (11 * day),
end: today + (12 * day)
}, {
name: 'Task G',
y: 1,
start: today + (14 * day),
end: today + (16 * day)
}]
}, {
name: 'Resource 3',
data: [{
name: 'Task H',
y: 2,
start: today - (1.5 * day),
end: today + (4 * day)
}, {
name: 'Task I',
y: 2,
start: today + (6 * day),
end: today + (9 * day)
}, {
name: 'Task J',
y: 2,
start: today + (10 * day),
end: today + (14 * day)
}, {
name: 'Task K',
y: 2,
start: today + (15 * day),
end: today + (17 * day)
}]
}]
});
#container {
max-width: 1000px;
min-width: 450px;
margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/cdhxgurq/1/
API:
https://api.highcharts.com/gantt/yAxis.breaks
https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate