html,

body {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

.toolbar {

  height: 30px;

  padding: 10px;

  background: #f7f7f7;

  border-bottom: 1px solid #cecece;

}

​

.toolbar select {

  height: 30px;

}

​

#container {

  height: calc(100% - 50px);

}

anychart.onDocumentReady(function () {

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

  // https://cdn.anychart.com/samples-data/gantt-general-features/fiscal-year/data.json

  anychart.data.loadJsonFile(

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

    function (data) {

      // tree data settings

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

​

      // create gantt resource chart

      var chart = anychart.ganttResource();

​

      // set splitter position

      chart.splitterPosition(222);

​

      // set chart data

      chart.data(treeData);

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

​

      // show all items

      chart.fitAll();

​

      document

        .getElementById('startMonth')

        .addEventListener('change', function (event) {

          // set fiscal year start month

          chart.xScale().fiscalYearStartMonth(event.target.value);

        });

    }

  );

});