html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  var data = getData();

  chart = anychart.ganttProject();

  chart.defaultRowHeight(40);

  chart.data(data, 'as-tree');

  var timeline = chart.getTimeline();

  chart.xScale().minimumGap(0.2).maximumGap(0.2);

  timeline.cropLabels(true);

​

  var previews = timeline.milestones().preview().enabled(true);

  var blPreviews = timeline.baselineMilestones().preview().enabled(true);

​

  previews.labels(true);

  blPreviews.labels(true);

​

  timeline.milestones().tooltip().format(function () {

    var value = 'Actual: ' + anychart.format.dateTime(this.actualStart);

    if (this.baselineStart) {

      value += '\nPlanned: ' + anychart.format.dateTime(this.baselineStart);

    }

    return value;

  });

​

  chart.container('container');

  chart.fitAll();

  chart.draw();

});

​

function getData() {

  return [

    {

      id: 1,

      name: 'Group + Auto BL',

      children: [

        {

          id: 2,

          name: 'Mil 1',

          actualStart: Date.UTC(2019, 3, 1)

        },

        {

          id: 3,

          name: 'BL Milestone 1',

          baselineStart: Date.UTC(2019, 3, 8)

        },

        {

          id: 4,

          name: 'Task + NaN BL',

          actualStart: Date.UTC(2019, 3, 14),

          actualEnd: Date.UTC(2019, 3, 27),

          baselineStart: NaN

        },

        {

          id: 5,

          name: 'Mil + BL',

          actualStart: Date.UTC(2019, 3, 20),

          baselineStart: Date.UTC(2019, 3, 22),

        },

        {

          id: 6,

          name: 'Mil + NaN BL',

          actualStart: Date.UTC(2019, 3, 14),

          baselineStart: NaN

        }

      ]

    },

  ];

}