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

    function (data) {

      // create data tree on raw data

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

​

      // create ganttProject chart

      var chart = anychart.ganttProject();

​

      // set data for the chart

      chart.data(treeData);

​

      // get chart data grid

      var dataGrid = chart.dataGrid();

​

      // set data grid column's width and font size for it's labels

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

​

      // get data grid buttons

      var button = dataGrid.buttons();

​

      // disable button's background for every state

      button.background(false);

      button.hovered().background(false);

      button.selected().background(false);

​

      // set data grod button's content using function

      var fn = function (path) {

        // get center of button's path

        var centerX = this.width / 2;

        var centerY = this.height / 2;

​

        // draw triangle in path

        if (this.state === 'selected') {

          anychart.graphics.vector.primitives

            .triangleDown(path.clear(), centerX, centerY, 8)

            .fill('#465A63');

        } else {

          anychart.graphics.vector.primitives

            .triangleRight(path.clear(), centerX, centerY, 8)

            .fill('#2278CF');

        }

      };

​

      // set function as content of button

      button.content(fn);

      button.selected().content(fn);

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // collapse all tasks

      chart.collapseAll();

​

      // expand first task

      chart.expandTask('pre-planning');

​

      // zoom chart all dates range

      chart.fitAll();

    }

  );

});