Grid Axis demo
HTML
<script>console.clear()</script>
<script src="http://code.highcharts.local/highcharts.js"></script>
<script src="http://code.highcharts.local/modules/gantt.js"></script>
<script src="http://code.highcharts.local/modules/exporting.js"></script>
<div id="container"></div>
CSS
#container {
max-width: 800px;
min-width: 400px;
height: 400px;
margin: 1em auto;
}
JavaScript
// THE CHART
Highcharts.ganttChart('container', {
title: {
text: 'Gantt Chart with Progress Indicators'
},
yAxis: {
grid: {
enabled: true,
columns: [{
title: {
text: 'Project'
}
}, {
title: {
text: 'Assignee'
},
labels: {
format: '{point.assignee}'
}
}]
}
},
series: [{
name: 'Project 1',
data: [{
name: 'Start prototype',
start: Date.UTC(2014, 10, 18),
end: Date.UTC(2014, 10, 25),
completed: 0.25,
assignee: 'Richards',
}, {
name: 'Test prototype',
start: Date.UTC(2014, 10, 27),
end: Date.UTC(2014, 10, 29),
assignee: 'Richards',
}, {
name: 'Develop',
start: Date.UTC(2014, 10, 20),
end: Date.UTC(2014, 10, 25),
assignee: 'Richards'
}, {
name: 'Run acceptance tests',
start: Date.UTC(2014, 10, 23),
end: Date.UTC(2014, 10, 26),
assignee: 'Richards'
}]
}]
});