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/resource-charts/bus-schedule/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples/resource-charts/bus-schedule/data.json',

    function (data) {

      var chart = anychart.resource();

      chart.data(data);

      chart

        .timeTrackingMode('availability-per-chart')

        .currentStartDate('2016-10-01')

        .pixPerHour(20);

​

      var activities = chart.activities();

      activities.stroke('#fff');

      activities.labels().padding(10);

​

      chart

        .grid()

        .oddHolidayHatchFill('backward-diagonal', 'green 0.25', 1.5, 15)

        .evenHolidayHatchFill('backward-diagonal', 'green 0.25', 1.5, 15);

​

      var resourceList = chart.resourceList();

      resourceList

        .names({

          fontColor: '#008CC3'

        })

        .types({

          fontColor: '#606166',

          fontSize: 13,

          fontWeight: 700

        })

        .descriptions({

          fontColor: '#606166',

          fontWeight: 400

        });

      resourceList.descriptions().margin().right(15);

​

      // Set tags settings.

      resourceList

        .tags()

        .background('#E5007D')

        .fontColor('#fff')

        .fontSize(12);

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});