html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples/gantt-general-features/styling-timeline/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/gantt-general-features/styling-timeline/data.json',

    function (data) {

      // create data tree on raw data

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

​

      // create project gantt chart

      var chart = anychart.ganttProject();

​

      // set data for the chart

      chart.data(treeData);

​

      // set the splitter position

      chart.splitterPosition(200);

​

      // setting common rows separation stroke

      chart.rowStroke('#414554 0.6');

​

      // styling the timeline

      chart

        .getTimeline()

        .rowEvenFill('#e4e5ea 0.5')

        .rowOddFill('#fff')

        .rowHoverFill('#f4e8ec')

        .rowSelectedFill('#d1b8bf')

        .columnStroke('#414554')

        .baselines()

        .above(true);

      // making baseline bar display above an actual time's bar

      // styling timeline's elements

      chart.getTimeline().elements().fill('#6aabcc').stroke('#45738b');

      chart.getTimeline().baselines().fill('#cf9ead').stroke('#6f5264');

      chart

        .getTimeline()

        .milestones()

        .fill('#96246a 0.7')

        .stroke('2 #96246a 1');

      chart

        .getTimeline()

        .groupingTasks()

        .fill('#938d9c 0.7')

        .stroke('#938d9c');

      chart

        .getTimeline()

        .groupingTasks()

        .progress()

        .fill('#61687d 0.8')

        .stroke('#61687d 1');

      chart.getTimeline().connectors().fill('#333').stroke({

        color: '#333',

        dash: '3 2'

      });

      chart

        .getTimeline()

        .elements()

        .selected()

        .fill('#01579b')

        .stroke('#fff');

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // zoom chart all dates range

      chart.fitAll();

    }

  );

});