Gantt Tree grid parent
HTML
<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>
CSS
#container {
max-width: 1000px;
margin: 1em auto;
}
JavaScript
// THE CHART
Highcharts.ganttChart('container', {
title: {
text: 'Upload for waterfall123'
},
xAxis: {
/* tickInterval: 1000, */
},
series: [{
name: 'waterfallid123',
data: [
{
name: 'upload.client.startcall',
start: 1546634577918,
end: 1546634579111
},{
// parent task
name: 'upload.client.transcode',
id: 'transcode123',
// hide the subtasks
// collapsed: true,
start: 1546634685408,
end: 1546634698680,
// use a smaller pointwidth for the parent task
pointWidth: 20
}, {
parent: 'transcode123',
id: 'transcode1',
name: 'transcode segment',
start: 1546634685419,
end: 1546634689408,
}, {
parent: 'transcode123',
id: 'transcode2',
name: 'transcode segment',
start: 1546634689408,
end: 1546634691408,
}, {
parent: 'transcode123',
name: 'transcode segment',
start: 1546634691408,
end: 1546634697680,
}
]
}]
});