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"

      },

      {

        id: "1_2",

        name: "Design",

        baselineStart: "2018-01-20",

        baselineEnd: "2018-01-31",

        actualStart: "2018-01-20",

        actualEnd: "2018-02-04"

      },

      {

        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"

      },

      {

        id: "1_5",

        name: "Testing",

        baselineStart: "2018-02-20",

        baselineEnd: "2018-03-05",

        actualStart: "2018-02-25",

        actualEnd: "2018-03-10"

      }

  ]}

];

    // 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 row and header height

    chart.defaultRowHeight(35);

    chart.headerHeight(105);

​

    // set the height of timeline elements

    chart.getTimeline().elements().height(20);

​

    // a function for drawing custom elements

    var drawingFunction = function () {

​

      // get the shapes of the element

      var shapes = this["shapes"];

      // get the shape to be modified

      var path = shapes["path"];

      // get the bounds of the element

      var bounds = this["predictedBounds"];

​

      var h = bounds.height;

      var t = bounds.top;

      var l = bounds.left;

      var r = bounds.left + bounds.width;

      var h1 = bounds.top + bounds.height;    

      var h4 = h / 4;

      var h2 = h / 2;

​

      // draw a rounded rectangle

      path.moveTo(l + h4, h1 - h4)

      path.arcTo(h4, h4, -270, 180)

      path.lineTo(r - h4, t + h4)

      path.arcTo(h4, h4, -90, 180)

      path.lineTo(l + h2, h1 - h4)

      path.close(); 

​

    }

​

    // access tasks and baselines

    var tasks = chart.getTimeline().tasks();

    var baselines = chart.getTimeline().baselines();

​

    // draw custom tasks and baselines

    tasks.rendering().drawer(drawingFunction);

    baselines.rendering().drawer(drawingFunction);

​

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

});