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>

<button onclick="update()">
update data
</button>

CSS

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

JavaScript

// THE CHART
function getData() {
	return data;
};

let 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)
        }];
        
let chart = Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        marginLeft: 150,
        marginRight: 150
    },
    title: {
        text: 'Highcharts TreeGrid'
    },
    xAxis: [{
        type: 'datetime'
    }],
    yAxis: [{
        title: '',
        type: 'treegrid',
        labels: {
            align: 'left'
        }
    }],
    series: getData()
});



function update() {
	data.push({
            collapsed: true,
            id: '4',
            name: 'Node 4'
  });
}