html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

  var data = getData();

  var chart = anychart.ganttProject();

  chart.defaultRowHeight(40);

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

  var timeline = chart.getTimeline();

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

​

  //Getting the previews.

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

  previews.enabled(true);

  previews.labels(true);

​

  //Styling previews.

  timeline.milestones().preview({

    fill: 'lightgreen',

    stroke: 'purple'

  });

​

  chart.title('Labels crop is set to ' + timeline.cropLabels());

  chart.container('container');

  chart.draw();

  chart.fitAll();

});

​

function getData() {

  return [

    {

      id: 1,

      name: 'Collapsed grouping task',

      collapsed: true,

      children: [

        {

          id: 2,

          name: 'Milestone 1',

          shortName: 'M1',

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

        },

        {

          id: 3,

          name: 'Milestone 2',

          shortName: 'M2',

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

        },

        {

          id: 3,

          name: 'Milestone 3',

          shortName: 'M3',

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

        },

        {

          id: 4,

          name: 'Milestone 4',

          shortName: 'M4',

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

        }

      ]

    },

    {

      id: 5,

      name: 'Expanded grouping task',

      children: [

        {

          id: 6,

          name: 'Milestone 5',

          shortName: 'M5',

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

        },

        {

          id: 7,

          name: 'Milestone 6',

          shortName: 'M6',

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

        },

        {

          id: 8,

          name: 'Milestone 7',

          shortName: 'M7',

          actualStart: Date.UTC(2019, 4, 12)

        }

      ]

    }

  ];

}