html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "1",

        name: "Development",

        actualStart: "2018-01-15",

        actualEnd: "2018-03-10",

        children: [

          {

            id: "1_1",

            name: "Analysis",

            actualStart: "2018-01-15",

            actualEnd: "2018-02-25",

            progressValue: "75%"

          },

          {

            id: "1_2",

            name: "Design",

            actualStart: "2018-01-20",

            actualEnd: "2018-02-04",

            progressValue: "100%"

          },

          {

            id: "1_3",

            name: "Meeting",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-05",

            custom_field: "1_2"

          },

          {

            id: "1_4",

            name: "Implementation",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-24",

            progressValue: "60%"

          },

          {

            id: "1_5",

            name: "Testing",

            actualStart: "2018-02-25",

            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);

​

    // access the timeline

    var timeline = chart.getTimeline();

​

    // configure labels of elements

    timeline.elements().labels().fontWeight(600);

​

    // configure labels of tasks

    timeline.tasks().labels().useHtml(true);

    timeline.tasks().labels().format(function() {

      if (this.progress == 1) {

        return "<span style='color:#64b5f6'>COMPLETE</span>";

      } else {

        return "<span style='color:#64b5f6'>" +

               this.progress * 100 + "</span>%";

      }

    });

​

    // configure labels of parent tasks

    timeline.groupingTasks().labels().useHtml(true);

    timeline.groupingTasks().labels().format(function() {

      var duration = (this.actualEnd - this.actualStart) / 1000 / 3600 / 24;

      return "<span style='color:#dd2c00'>" + 

             duration + "</span>d";

    });

​

    // configure labels of milestones

    timeline.milestones().labels().useHtml(true);

    timeline.milestones().labels().format(function() {

      var relatedTaskId = this.getData("custom_field");

      var relatedTaskItem = treeData.search("id", relatedTaskId);

      var relatedTaskName = relatedTaskItem.get("name");

      return "<span style='color:#ffa000'>Review:</span> " +

             relatedTaskName;

    });

​

    // 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();

});