html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var data = [

        {id: 1, name: 'Parent', progressValue: '14%', actualStart: '2000-02-24', actualEnd: '2000-02-27'},

        {id: 2, name: 'Child 1', parent: 1, progressValue: '25%', actualStart: '2000-02-24', actualEnd: '2000-02-29'},

        {id: 3, name: 'Child 2', parent: 2, progressValue: '0%', actualStart: '2000-02-24T24:00', actualEnd: '2000-02-25T09:00', connectTo: 4, connectorType: 'finish-start'},

        {id: 4, name: 'Child 3', parent: 2, progressValue: '0%', actualStart: '2000-02-26T00:00', actualEnd: '2000-02-26T09:00', connectTo: 5, connectorType: 'finish-start'},

        {id: 5, name: 'Child 4', parent: 2, progressValue: '0%', actualStart: '2000-02-27', actualEnd: '2000-02-28T08:00', connectTo: 6, connectorType: 'finish-start'},

        {id: 6, name: 'Child 5', parent: 1, progressValue: '27%', actualStart: '2000-02-28T08:00', actualEnd: '2000-02-29'},

    ];

​

    var treeData = anychart.data.tree(data, 'as-table');

​

    var dataItem = treeData.search('id', 1);

​

    var child = {

            id: 7,

            name: 'Added Child',

            progressValue: '0%',

            actualStart: '2000-02-26T08:00',

            actualEnd: '2000-02-27',

            isNew: true

    };

​

    // Add child.

    dataItem.addChildAt(child, 0);

​

    var chart = anychart.ganttProject();

​

    var dataGrid = chart.dataGrid();

    dataGrid.column(1).labelsOverrider(function (label, item) {

        if (item.get('isNew'))

            label.fontColor('#F44336');

    });

​

    chart.data(treeData);

    chart.title('Add child by index');

    chart.container('container');

    chart.draw();

    chart.fitAll();

});