html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "1",

        name: "Development",

        baselineStart: "2018-01-12",

        baselineEnd: "2018-03-04",

        actualStart: "2018-01-15",

        actualEnd: "2018-03-10",

        children: [

          {

            id: "1_1",

            name: "Analysis",

            baselineStart: "2018-01-12",

            baselineEnd: "2018-01-25",

            actualStart: "2018-01-15",

            actualEnd: "2018-01-25",

            progressValue: "75%"

          },

          {

            id: "1_2",

            name: "Design",

            baselineStart: "2018-01-20",

            baselineEnd: "2018-01-31",

            actualStart: "2018-01-20",

            actualEnd: "2018-02-04",

            progressValue: "80%"

          },

          {

            id: "1_3",

            name: "Meeting",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-05"

          },

          {

            id: "1_4",

            name: "Implementation",

            baselineStart: "2018-02-01",

            baselineEnd: "2018-02-19",

            actualStart: "2018-02-05",

            actualEnd: "2018-02-24",

            progressValue: "60%"

          },

          {

            id: "1_5",

            name: "Testing",

            baselineStart: "2018-02-20",

            baselineEnd: "2018-03-05",

            actualStart: "2018-02-25",

            actualEnd: "2018-03-10",

            progressValue: "20%"

          }

      ]}

    ];

    // 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 the scale

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

​

    // set the row height

    chart.defaultRowHeight(35);

​

    // set the header height

    chart.headerHeight(105);

​

    // disable timeline tooltips

    chart.getTimeline().tooltip(false);

​

    // disable labels of timeline elements

    chart.getTimeline().elements().labels(false);

    // allow editing the chart

    chart.edit(true);

​

    // access the timeline and timeline elements

    var timeline = chart.getTimeline();

    var elements = timeline.elements();

​

    // configure duration thumbs

    elements.edit().thumbs().size(10);

    elements.edit().thumbs().stroke("#dd2c00", 2);

    elements.edit().thumbs().fill("#00bfa5");

​

    // configure connector thumbs

    elements.edit().connectorThumbs().size(15);

    elements.edit().connectorThumbs().fill("#dd2c00");

    elements.edit().connectorThumbs().stroke("#dd2c00", 2);

​

    // configure connector thumbs on the right

    elements.edit().end().connectorThumb().type("triangleRight");

    elements.edit().end().connectorThumb().horizontalOffset(-1);

​

    // configure connector thumbs on the left

    elements.edit().start().connectorThumb().type("triangleLeft");

    elements.edit().start().connectorThumb().horizontalOffset(1);

​

    // configure sliders of progress bars

    timeline.tasks().progress().edit().fill("#00bfa5");

    timeline.tasks().progress().edit().stroke("#dd2c00", 2);

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});