Multiple Milestones

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-gantt.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
      // The data used in this sample can be obtained from the CDN
      // https://cdn.anychart.com/samples/gantt-general-features/multiple-milestones/data.json
      anychart.data.loadJsonFile(
        'https://cdn.anychart.com/samples/gantt-general-features/multiple-milestones/data.json',
        function (data) {
          // create data tree
          var treeData = anychart.data.tree(data, 'as-table');

          // create resource gantt chart
          var chart = anychart.ganttResource();

          // set data for the chart
          chart.data(treeData);

          // set the spliter position
          chart.splitterPosition(220);

          // set data grid settings
          var dataGrid = chart.dataGrid();

          var firstColumn = dataGrid.column(0);
          firstColumn
            .title('Project\nNumber')
            .width(80)
            .labels()
            .format(function () {
              return this.item.get('project_number');
            });
          firstColumn.title().fontSize(14);

          var secondColumn = dataGrid.column(1);
          secondColumn.title('Project\nTitle').width(140);
          secondColumn.title().fontSize(14);
          secondColumn.labels().textOverflow('...');

          // set container id for the chart
          chart.container('container');

          // initiate chart drawing
          chart.draw();

          // zoom chart all dates range
          chart.fitAll();
        }
      );
    });
  
</script>
</body>
</html>
Warning!

Multiple Milestones

Multiple Milestones
