html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

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

  chart = anychart.ganttProject();

  chart.data(treeData);

​

  // --- Common configuration.

  var timeline = chart.getTimeline();

  chart.xScale().minimumGap(0.3);

  chart.xScale().maximumGap(0.3);

  chart.defaultRowHeight(50);

  timeline.tasks().progress().height('50%').stroke('0.5 navy');

  timeline.baselines().progress().fill('lightgreen').stroke('green');

​

  // --- Configuring markers.

  // This will configure all start markers.

  timeline.elements().startMarker()

      .enabled(true)

      .type('star5')

      .stroke('lightgrey');

​

  // This will configure all end markers.

  timeline.elements().endMarker()

      .enabled(true)

      .type('star5')

      .stroke('lightgrey');

​

  // This will configure startMarker for both tasks and groupingTasks.

  timeline.tasks().startMarker()

      .fill('red');

​

  // This will configure endMarker for both tasks and groupingTasks.

  timeline.tasks().endMarker()

      .fill('green');

​

  // Disabling progress start marker. This will disable startMarker for both tasks and groupingTasks.

  timeline.tasks().progress().startMarker(false);

​

  timeline.tasks().progress().endMarker()

      .type('triangleUp')

      .offsetY(10)

      .fill('orange');

​

  timeline.baselines().startMarker()

      .fill('purple');

​

  timeline.baselines().endMarker()

      .fill('#009999');

​

  // Disabling baseline progress start marker.

  timeline.baselines().progress().startMarker(false);

​

  timeline.baselines().progress().endMarker()

      .type('triangleUp')

      .offsetY(10)

      .fill('pink');

​

  chart.container('container');

  chart.draw();

  chart.fitAll();

});

​

​

function getData() {

  return [

    {

      id: 1,

      name: 'Grouping task',

      baselineStart: Date.UTC(2020, 2, 4),

      baselineEnd: Date.UTC(2020, 2, 25),

      baselineProgressValue: 0.5,

      children: [

        {

          id: 2,

          name: 'Child task 1',

          actualStart: Date.UTC(2020, 2, 1),

          actualEnd: Date.UTC(2020, 2, 10),

          progressValue: 0.4,

          baselineStart: Date.UTC(2020, 2, 4),

          baselineEnd: Date.UTC(2020, 2, 12),

          baselineProgressValue: 0.6

        },

        {

          id: 3,

          name: 'Child task 2',

          actualStart: Date.UTC(2020, 2, 15),

          actualEnd: Date.UTC(2020, 2, 24),

          progressValue: 0.2,

          baselineStart: Date.UTC(2020, 2, 12),

          baselineEnd: Date.UTC(2020, 2, 25),

          baselineProgressValue: 0.7

        }

      ]

    }

  ];

}