html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // load the data

  anychart.data.loadJsonFile(

    "https://gist.githubusercontent.com/awanshrestha/07b9144e8f2539cd192ef9a38f3ff8f5/raw/b4cfb7c27b48a0e92670a87b8f4b1607ca230a11/Fifa%2520World%2520Cup%25202022%2520Qatar%2520Stadium%2520Schedule.json",

    function (data) {

      // create a data tree

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

​

      // create a resource gantt chart

      var chart = anychart.ganttResource();

​

      // set the data for the chart

      chart.data(treeData);

      // customize the rows

      chart

        .rowSelectedFill("#D4DFE8")

        .rowHoverFill("#EAEFF3")

        .splitterPosition(230);

      // set the row height

      chart.defaultRowHeight(50);

      // customize the column settings:

      // get the data grid

      var dataGrid = chart.dataGrid();

      // set the fixed columns mode

      dataGrid.fixedColumns(true);

      // first column 

      dataGrid

        .column(0)

        .title("#")

        .width(30)

        .labels({ hAlign: "center" });

      // second column       

      dataGrid

        .column(1)

        .title("Stadium")

        .width(200)

        .labels()

        .useHtml(true)

        .format(function () {

          return (

           "<strong>" + this.name.toString() + "</strong> <br>" + this.item.get("city")

          );

        });

      // configure the period labels:

      // get the period labels

      var periodLabels = chart.getTimeline().periods().labels();

      // set the period labels

      periodLabels

        .enabled(true)

        .useHtml(true)

        .format(

          "<span style='color:#fff; font-size: 12px;'>{%result}</span>"

        );

      // configure the background of the chart

      chart.background("#edeae8 0.8");

      // customize the color of the bars:

      // get the elements

      var elements = chart.getTimeline().elements();

      // check if the current item is a tie, and if yes, color it differently

      elements.normal().fill(function() {

        var result = this.period.result;

        var scores = result.split("-").map(Number);

        if (scores[0] === scores[1]) {

          return "#11A055 0.8";

        } else {

          return "#9a1032 0.8";

        }

      });

      elements.normal().stroke("#212c68");

      // configure the tooltip

      var tooltip = chart.getTimeline().tooltip();

      tooltip

        .useHtml(true)

        .format(function(e) {

          var tooltipText;

          if (typeof e.period === "undefined") {

            tooltipText = e.item.la.city;

          } else {

            var period = e.period;

            tooltipText = period.result;

          }

          return tooltipText;

        });

      // set the container 

      chart.container("container");

​

      // draw the chart

      chart.draw();

    dataGrid.fixedColumns(true);

    }

  );

});