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-table');

​

  // Decoration.

  var timeline = chart.getTimeline();

  chart.defaultRowHeight(100);

  taskProgress = timeline.tasks().progress();

  taskProgress.height('50%');

  baselineProgress = timeline.baselines().progress();

  chart.xScale().minimumGap(0.4);

  chart.xScale().maximumGap(0.4);

​

  chart.title('130% progress is drawn over end of bar.');

  chart.container('container');

  chart.draw();

  chart.fitAll();

​

  setInterval(function() {

    var enabledState = taskProgress.drawOverEnd();

    taskProgress.drawOverEnd(!enabledState);

    baselineProgress.drawOverEnd(!enabledState);

​

    var titleText = '130% progress is ' + (enabledState ? 'not ' : '') + 'drawn over end of bar.';

    chart.title(titleText);

  }, 500)

});

​

function getData() {

  return [

      {

          id: 1,

          name: 'Task',

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

          actualEnd: Date.UTC(2019, 5, 20),

          progressValue: '130%',

          baselineStart: Date.UTC(2019, 5, 5),

          baselineEnd: Date.UTC(2019, 5, 15),

          baselineProgressValue: '130%'

      }

  ];

}