html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    var data = getData();

​

    var chart = anychart.ganttProject();

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

    chart.defaultRowHeight(40);

            chart.xScale().minimumGap(0.4).maximumGap(0.6);

​

    var timeline = chart.getTimeline();

​

    // Get milestones.

    var milestones = timeline.milestones();

​

    // Get baseline milestones. baselineMilestones

    var baselineMilestones = timeline.baselineMilestones();

​

    milestones.fill('orange');

    baselineMilestones.fill('green');

​

    baselineMilestones.labels().format('[Planned]: {%name}');

​

    chart.title('Project baseline milestones demo');

    chart.container('container');

    chart.draw();

    chart.fitAll();

});

​

function getData() {

    return [

        {

            id: 1,

            name: 'Auto calculated group',

            children: [

                {

                    id: 2,

                    name: 'Milestone',

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

                },

                {

                    id: 3,

                    name: 'Milestone + Baseline Milestone',

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

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

                },

                {

                    id: 4,

                    name: 'Baseline Milestone',

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

                },

            ]

        },

    ];

}