html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

anychart.onDocumentReady(function () {

  anychart.data.loadJsonFile("https://gist.githubusercontent.com/shacheeswadia/21da3da501982400b8ca35690b17ea5a/raw/d17e3774c6db1502b5d95677a5656ecc43f24526/resourceChartData.json", function (data) {

​

    // create a data tree

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

​

    // create a resource gantt chart

    var chart = anychart.ganttResource(); 

    // set the data

    chart.data(treeData);

    // fit the elements to the width of the timeline

    chart.fitAll();

    // set the position of the splitter to match the first column

    chart.dataGrid().fixedColumns(true);

    // enable and configure the chart title

    var title = chart.title();

    title.enabled(true);

    title

      .text("Tokyo 2020 Paralympic Schedule - Venues and Sports")

      .fontSize(18)

      .fontWeight(600)

      .fontColor("#b32e3c")

      .padding(10);

    // customize the color of the bars 

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

    elements.normal().fill("#e96a7b 0.75");

    elements.normal().stroke("#db4e50");

    // set the row height

    chart.defaultRowHeight(25);

​

    // set the header height

    chart.headerHeight(95);

    // set the container id

    chart.container("container");

​

    // draw the chart

    chart.draw();

  });

});