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"

      },

      {

        id: "1_2",

        parent: "1",

        name: "Analysis",

        actualStart: "2018-01-15",

        actualEnd: "2018-01-25"

      },

      {

        id: "1_3",

        parent: "1",

        name: "Design",

        actualStart: "2018-01-20",

        actualEnd: "2018-02-04"

      },

      {

        id: "1_4",

        parent: "1",

        name: "Meeting",

        actualStart: "2018-02-05",

        actualEnd: "2018-02-05"

      },

      {

        id: "1_5",

        parent: "1",

        name: "Implementation",

        actualStart: "2018-02-05",

        actualEnd: "2018-02-24"

      },

      {

        id: "1_6",

        parent: "1",

        name: "Testing",

        actualStart: "2018-02-25",

        actualEnd: "2018-03-10"

      },

      {

        id: "2",

        name: "PR Campaign",

        actualStart: "2018-02-25",

        actualEnd: "2018-03-22"

      },

      {

        id: "2_1",

        parent: "2",

        name: "Planning",

        actualStart: "2018-02-25",

        actualEnd: "2018-03-10"

      },

      {

        id: "2_2",

        parent: "2",

        name: "Promoting",

        actualStart: "2018-03-11",

        actualEnd: "2018-03-22"

      }

    ];

    // create a data tree

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

​

    // create a chart

    var chart = anychart.ganttProject();

    // set the data

    chart.data(treeData);

​

    // configure the scale

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

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});