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",

        manager: "John Doe",

        children: [

          {

            id: "1_1",

            name: "Analysis",

            actualStart: "2018-01-15",

            actualEnd: "2018-01-25",

            progressValue: "75%",

            manager: "Richard Roe"

          },

          {

            id: "1_2",

            name: "Design",

            actualStart: "2018-01-20",

            actualEnd: "2018-02-04",

            progressValue: "100%",

            manager: "Larry Loe"

          },

          {

            id: "1_3",

            name: "Meeting",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-05",

            manager: "John Doe"

          },

          {

            id: "1_4",

            name: "Implementation",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-24",

            progressValue: "60%",

            manager: "Marta Moe"

          },

          {

            id: "1_5",

            name: "Testing",

            actualStart: "2018-02-25",

            actualEnd: "2018-03-10",

            manager: "Jane Poe"

          }

      ]}

    ];

    // 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 tooltips of the timeline

​

    chart.getTimeline().tooltip().useHtml(true);

​

    chart.getTimeline().tooltip().format(function() {

​

      var numChildren = this.item.numChildren();

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

      var startDate = anychart.format.dateTime(this.actualStart, "dd MMM");

      var endDate = anychart.format.dateTime(this.actualEnd, "dd MMM");

      var progress = this.progress * 100 + "%";

      var manager = this.getData("manager");

​

      var parentText = "<span style='font-weight:600;font-size:12pt'>" + 

                       startDate + " - " + endDate + "</span><br><br>" +

                       "Duration: " + duration + " days<br>" +

                       "Number of Tasks: " + numChildren + "<br><br>" +                   

                       "Manager: " + manager;

​

      var milestoneText = "<span style='font-weight:600;font-size:12pt'>" +

                          startDate + "</span><br><br>" +

                          "Manager: " + manager;

​

      var taskText = "<span style='font-weight:600;font-size:12pt'>" + 

                   startDate + " - " + endDate + "</span><br><br>" +

                     "Duration: " + duration + " days<br>" +

                     "Progress: " + progress + "<br><br>" +

                     "Manager: " + manager;

​

      // identify the task type and display the corresponding text

      if (numChildren > 0) {

        return parentText;

      } else {

        if (duration == 0) {

          return milestoneText;

        } else {

          return taskText;

        }

      }

​

    });

​

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

});