<div class="container-fluid">
  <div class="card shadow mt-3 mb-3 mr-2 ml-2">
    <div class="card-body">
      <div id="chart-container"></div>
      <div id="outer">
        Scroll bar Positions:
        <button type="button" class="btn btn-sm btn-outline-primary" id="topScroll">Top</button>
        <button type="button" class="btn btn-sm btn-primary-grad" id="bottomScroll">Bottom</button>
      </div>
    </div>
  </div>
</div>

.shadow {
  text-align: center !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 6px 14px 0 rgba(33, 35, 68, 0.09) !important;
}

*:focus {
    outline: none;
}

const dataSource = {
  chart: {
    caption: "Summer Olympics Medal Tally",
    subcaption: "By Countries",
    yaxisname: "Count of Medals",
    numvisibleplot: "16",
    labeldisplay: "auto",
    theme: "fusion"
  },
  categories: [
    {
      category: [
        {
          label: "USA"
        },
        {
          label: "GB"
        },
        {
          label: "China"
        },
        {
          label: "Russia"
        },
        {
          label: "Germany"
        },
        {
          label: "France"
        },
        {
          label: "Japan"
        },
        {
          label: "Australia"
        },
        {
          label: "Italy"
        },
        {
          label: "Canada"
        },
        {
          label: "South Korea"
        },
        {
          label: "Netherlands"
        },
        {
          label: "Brazil"
        },
        {
          label: "NZ"
        },
        {
          label: "Spain"
        },
        {
          label: "Hungary"
        },
        {
          label: "Kenya"
        },
        {
          label: "Jamaica"
        },
        {
          label: "Cuba"
        },
        {
          label: "Croatia"
        }
      ]
    }
  ],
  dataset: [
    {
      seriesname: "2017",
      data: [
        {
          value: "121"
        },
        {
          value: "70"
        },
        {
          value: "67"
        },
        {
          value: "55"
        },
        {
          value: "42"
        },
        {
          value: "42"
        },
        {
          value: "41"
        },
        {
          value: "29"
        },
        {
          value: "28"
        },
        {
          value: "22"
        },
        {
          value: "21"
        },
        {
          value: "19"
        },
        {
          value: "19"
        },
        {
          value: "18"
        },
        {
          value: "17"
        },
        {
          value: "15"
        },
        {
          value: "13"
        },
        {
          value: "11"
        },
        {
          value: "11"
        },
        {
          value: "10"
        }
      ]
    },
    {
      seriesname: "2016",
      data: [
        {
          value: "123"
        },
        {
          value: "71"
        },
        {
          value: "59"
        },
        {
          value: "52"
        },
        {
          value: "34"
        },
        {
          value: "32"
        },
        {
          value: "29"
        },
        {
          value: "32"
        },
        {
          value: "25"
        },
        {
          value: "21"
        },
        {
          value: "24"
        },
        {
          value: "17"
        },
        {
          value: "20"
        },
        {
          value: "14"
        },
        {
          value: "13"
        },
        {
          value: "16"
        },
        {
          value: "14"
        },
        {
          value: "12"
        },
        {
          value: "11"
        },
        {
          value: "9"
        }
      ]
    }
  ]
};

FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "scrollcolumn2d",
    renderAt: "chart-container",
    width: "100%",
    height: "400",
    dataFormat: "json",
    dataSource
  }).render();

  document.getElementById("topScroll").addEventListener("click", function() {
    document
      .getElementById("topScroll")
      .classList.remove("btn-outline-primary");
    document
      .getElementById("bottomScroll")
      .classList.remove("btn-primary-grad");
    document
      .getElementById("bottomScroll")
      .classList.add("btn-outline-primary");
    document.getElementById("topScroll").classList.add("btn-primary-grad");
    myChart.setChartAttribute("scrollPosition", "top");
  });

  document.getElementById("bottomScroll").addEventListener("click", function() {
    document.getElementById("topScroll").classList.remove("btn-primary-grad");
    document
      .getElementById("bottomScroll")
      .classList.remove("btn-outline-primary");
    document.getElementById("topScroll").classList.add("btn-outline-primary");
    document.getElementById("bottomScroll").classList.add("btn-primary-grad");
    myChart.setChartAttribute("scrollPosition", "bottom");
  });
});