TreeGrid Demo

author(s): Jon Arild Nygård

by YameenYasin

HTML

<script src="https://code.highcharts.com/gantt/highcharts.js"></script>
<script src="https://code.highcharts.com/gantt/modules/treegrid.js"></script>

<div id="container"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

// THE CHART
Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        marginLeft: 150,
        marginRight: 150
    },
    title: {
        text: 'Highcharts TreeGrid'
    },
    xAxis: [{
        type: 'datetime'
    }],
    yAxis: [{
        title: 'Hello',
        type: 'treegrid',
        labels: {
            align: 'left'
        }
    }],
    series: [{
        name: 'Project 1',
        data: [{
            collapsed: true,
            id: '1',
            name: 'Node 1',
            x: Date.UTC(2014, 10, 18)
        }, {
            collapsed: true,
            id: '2',
            parent: '1',
            name: 'Node 2',
            x: Date.UTC(2014, 10, 20)
        }, {
            id: '3',
            parent: '2',
            name: 'Node 3',
            x: Date.UTC(2014, 10, 26)
        }]
    }]
});