html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "1",

        name: "Root",

        start_date: "2018-01-15",

        end_date: "2018-03-10",

        child_items: [

          {

            id: "1_2",

            name: "Child 1",

            start_date: "2018-01-15",

            end_date: "2018-01-25"

          },

          {

            id: "1_3",

            name: "Child 2",

            start_date: "2018-01-20",

            end_date: "2018-02-04"

          },

          {

            id: "1_3",

            name: "Child 3",

            start_date: "2018-02-05",

            end_date: "2018-02-05"

          },

          {

            id: "1_4",

            name: "Child 4",

            start_date: "2018-02-05",

            end_date: "2018-02-24"

          },

          {

            id: "1_5",

            name: "Child 5",

            start_date: "2018-02-25",

            end_date: "2018-03-10"

          }

      ]}

    ];

    // create a data tree

    var treeData = anychart.data.tree(data, "as-tree", null, {children: "child_items"});

​

    // map the data

    var mapping = treeData.mapAs({actualStart: "start_date", actualEnd: "end_date"});

​

    // create a chart

    var chart = anychart.ganttProject();

​

    // set the data

    chart.data(mapping);

​

    // configure the scale

    chart.getTimeline().scale().maximum("2018-03-15");

​

    // set the chart title

    chart.title("Tree Data Model: Mapping");

    chart.title().padding(10);

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});