html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {

        id: "1",

        name: "Development",

        actualStart: "15 janvier 2018",

        actualEnd: "10 mars 2018",

        children: [

          {

            id: "1_1",

            name: "Analysis",

            actualStart: "15 janvier 2018",

            actualEnd: "25 janvier 2018"

          },

          {

            id: "1_2",

            name: "Design",

            actualStart: "20 janvier 2018",

            actualEnd: "4 février 2018"

          },

          {

            id: "1_3",

            name: "Meeting",

            actualStart: "5 février 2018",

            actualEnd: "5 février 2018"

          },

          {

            id: "1_4",

            name: "Implementation",

            actualStart: "5 février 2018",

            actualEnd: "24 février 2018"

          },

          {

            id: "1_5",

            name: "Testing",

            actualStart: "25 février 2018",

            actualEnd: "10 mars 2018"

          }

      ]}

    ];

​

    // set the input locale

    anychart.format.inputLocale("fr-fr");

​

    // set the input date/time format

    anychart.format.inputDateTimeFormat("d MMMM yyyy");

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

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

​

    // fit elements to the width of the timeline

    chart.fitAll();

});