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

  // 

  anychart.data.loadJsonFile(

    'https://gist.githubusercontent.com/1shan-pixel/070cb04ca5eb455688ef9662c8a28c44/raw/ca9c62898235514043fd5398a243b6f39535f64b/resource.json',

    function (data) {

      var chart = anychart.resource();

      var dateSet = anychart.data.set(data);

​

      chart.data(dateSet.mapAs({ description: 'city' }));

    chart.horizontalScrollBar(true); 

      chart.verticalScrollBar(true);

      chart

        .zoomLevel(100)

        .pixPerHour(40)

        .minRowHeight(90)

        .currentStartDate('2022-11-20');

​

      chart

        .activities()

        .labels()

        .useHtml(true)

        .format(function () {

          return (

            this.name +

            '<br><span style="color: #B0E0E6">' +

            this.activityInfo.group +

            '</span>' + 

            '<br><span style="color: #FFD1DC">'+ this.activityInfo.result + '</span>'

          );

        });

​

      // set container id for the chart

      chart.container('container');

      // initiate chart drawing

      chart.draw();

    }

  );

});