<div id="chart-container" class="chart"></div>

.chart {
  width: 100%;
  height: 400px;
}

const chartData = [
  {
    label: "Venezuela",
    value: "290",
    fontSize: "2.5vw"
  },
  {
    label: "Saudi",
    value: "260"
  },
  {
    label: "Canada",
    value: "180"
  },
  {
    label: "Iran",
    value: "140"
  },
  {
    label: "Russia",
    value: "115"
  },
  {
    label: "UAE",
    value: "100"
  },
  {
    label: "US",
    value: "30"
  },
  {
    label: "China",
    value: "30"
  }
];

const chartConfig = {
  type: "column2d",
  renderAt: "chart-container",
  width: "100%",
  height: "100%",
  dataFormat: "json",
  dataSource: {
    chart: {
      caption: "Countries With Most Oil Reserves [2017-18]",
      subCaption: "In MMbbl = One Million barrels",
      xAxisName: "Country",
      yAxisName: "Reserves (MMbbl)",
      numberSuffix: "K",
      theme: "fusion",
      captionFontSize: "4vw",
      subCaptionFontSize: "3vw",
      baseFontSize: "5vw",
      outCnvBaseFontSize: "5vw",
      labelFontSize: "2vw",
      valueFontSize: "2vw",
      xAxisNameFontSize: "2.5vw",
      yAxisNameFontSize: "2.5vw",
      yAxisValueFontSize: "1.5vw",
      trendValueFontSize: 14
    },
    data: chartData
  }
};

FusionCharts.ready(function () {
  var fusioncharts = new FusionCharts(chartConfig);
  fusioncharts.render();
});