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

        actualEnd: "2018-03-10",

        children: [

          {

            id: "1_2",

            name: "Analysis",

            actualStart: "2018-01-25",

            actualEnd: "2018-02-08"

          },

          {

            id: "1_3",

            name: "Design",

            actualStart: "2018-02-04",

            actualEnd: "2018-02-14"

          },

          {

            id: "1_4",

            name: "Meeting",

            actualStart: "2018-02-15",

            actualEnd: "2018-02-15"

          },

          {

            id: "1_5",

            name: "Implementation",

            actualStart: "2018-02-15",

            actualEnd: "2018-02-27"

          },

          {

            id: "1_6",

            name: "Testing",

            actualStart: "2018-02-28",

            actualEnd: "2018-03-10"

          }

      ]},

      { 

        id: "2",

        name: "PR Campaign",

        actualStart: "2018-02-15",

        actualEnd: "2018-03-22",

        children: [

          {

            id: "2_1",

            name: "Planning",

            actualStart: "2018-02-15",

            actualEnd: "2018-03-10"

          },

          {

            id: "2_2",

            name: "Promoting",

            actualStart: "2018-03-11",

            actualEnd: "2018-03-22"

          }

      ]}

    ];

    // create a data tree

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

​

    // create a chart

    chart = anychart.ganttProject();

    // set the data

    chart.data(treeData);

​

    // access data grid buttons

    var buttons = chart.dataGrid().buttons();

​

    // disable the default settings of data grid buttons

    buttons.background().fill(null);

    buttons.background().stroke(null);

​

    // a function for drawing custom content for buttons

    var drawingFunction = function () {

      var half = this.width / 2;

      switch (this.state) {

        case "normal":

          var shape = anychart.graphics.vector.primitives.cross(this.path.clear(), half, half, half);

          shape.fill("#ef6c00");

          break;

        case "hovered":

          var shape = anychart.graphics.vector.primitives.cross(this.path.clear(), half, half, half);

          shape.fill(anychart.color.lighten("#ef6c00"));

          break;

        case "selected":

          var shape = anychart.graphics.vector.primitives.hLine(this.path.clear(), half, half, half);

          shape.fill("#64b5f6");

          break;

      }

    }

​

    // set the content of data grid buttons in different states

    buttons.normal().content(drawingFunction);

    buttons.hovered().content(drawingFunction);

    buttons.selected().content(drawingFunction);

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

});