html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "1",

        name: "Parent Task",

        actualStart: "2018-01-15",

        actualEnd: "2018-03-10",

        children: [

          {

            id: "1_1",

            name: "Task",

            actualStart: "2018-01-15",

            actualEnd: "2018-01-25"

          },

          {

            id: "1_2",

            name: "Task",

            actualStart: "2018-01-20",

            actualEnd: "2018-02-04"

          },

          {

            id: "1_3",

            name: "Milestone",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-05"

          },

          {

            id: "1_4",

            name: "Parent Task",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-24",

            children: [

              {

                id: "1_4_1",

                name: "Task",

                actualStart: "2018-02-05",

                actualEnd: "2018-02-10"

              },

              {

                id: "1_4_2",

                name: "Task",

                actualStart: "2018-02-11",

                actualEnd: "2018-02-24"

              }

          ]},

          {

            id: "2",

            name: "Task",

            actualStart: "2018-02-05",

            actualEnd: "2018-03-10",

          }

      ]}

    ];

    // create a data tree

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

​

    // create a chart

    var chart = anychart.ganttProject();

    // set the data

    chart.data(treeData);

​

    // configure tasks

    var tasks = chart.getTimeline().tasks();

    tasks.normal().fill("#455a64 0.5");

    tasks.selected().fill("#dd2c00");

    tasks.normal().stroke("#455a64");

    tasks.selected().stroke("#dd2c00");

​

    // configure parent tasks

    var parentTasks = chart.getTimeline().groupingTasks();

    parentTasks.normal().fill("#00838f");

    parentTasks.selected().fill("#dd2c00");

    parentTasks.normal().stroke("#00838f");

    parentTasks.selected().stroke("#dd2c00");

​

    // configure milestones

    var milestones = chart.getTimeline().milestones();

    milestones.normal().fill("#dd2c00 0.5");

    milestones.selected().fill("#dd2c00");

    milestones.normal().stroke("#dd2c00");

    milestones.selected().stroke("#dd2c00");

​

    milestones.markerType("circle");

    milestones.preview(true);

​

    // configure the scale

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

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});