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-labels/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/gantt-general-features/styling-labels/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);

​

      // get chart data grid link to set column settings

      var dataGrid = chart.dataGrid();

      // set column width

      dataGrid.column(1).width(275);

​

      // set the splitter position

      chart.splitterPosition(328);

​

      // set default row height

      chart.defaultRowHeight(40);

​

      // create palette

      var palette = anychart.palettes.distinctColors();

      palette.items(['#64b5f6', '#ef6c00', '#fff', '#00838f']);

​

      // get chart timeline

      var timeLine = chart.getTimeline();

​

      // set base labels settings

      timeLine

        .elements()

        .labels()

        .format('{%Name}')

        .fontColor(palette.itemAt(0))

        .position('left-center')

        .anchor('right-center')

        .offsetX(5);

​

      // set parent labels settings

      timeLine

        .groupingTasks()

        .labels()

        .format('Group: {%Name}')

        .fontColor(palette.itemAt(1))

        .fontWeight('bold')

        .position('right-center')

        .anchor('left-center');

​

      // set milestones labels settings

      var milestonesLabels = timeLine

        .milestones()

        .labels()

        .format('{%actualStart}{dateTimeFormat:d.MM.yy (HH:mm)}: {%Name}')

        .position('left-center')

        .anchor('right-center');

      milestonesLabels

        .background()

        .enabled(true)

        .fill('orange 0.3')

        .stroke('none');

​

      // set progress labels settings

      var progressLabels = timeLine.tasks().progress().labels();

      progressLabels

        .enabled(true)

        .format('{%progress}')

        .padding(2)

        .position('right-center')

        .anchor('left-center')

        .fontColor(palette.itemAt(2))

        .fontSize(8);

      progressLabels

        .background()

        .enabled(true)

        .fill('#333')

        .stroke('none');

​

      // set base line labels settings

      timeLine

        .baselines()

        .labels()

        .enabled(true)

        .fontColor(palette.itemAt(3))

        .position('left-bottom')

        .anchor('right-bottom')

        .hAlign('middle')

        .fontSize(7)

        .format(

          'Planned: {%baselineStart}{dateTimeFormat:d.MM} - {%baselineEnd}{dateTimeFormat:d.MM}'

        );

​

      // set scale maximum and minimum

      chart.xScale().minimum(Date.UTC(2009, 11));

      chart.xScale().maximum(Date.UTC(2010, 4));

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // zoom chart all dates range

      chart.fitAll();

    }

  );

});