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

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

new FusionCharts({
  renderAt: "chart-container",
  id: "demo-chart",
  type: "bar2d",
  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",
      paletteColors: "#5D62B5, #29C3BE, #F2726F, #FFC533, #62B58F, #BC95DF, #67CDF2",
      usePattern: "1",
      showPlotBorder: 1
    },
    data: [
      {
        label: "Venezuela",
        value: "290"
      },
      {
        label: "Saudi",
        value: "260",
        patternType: "square"
      },
      {
        label: "Canada",
        value: "180",
        patternType: "circle"
      },
      {
        label: "Iran",
        value: "140"
      },
      {
        label: "Russia",
        value: "115",
        patternType: "square"
      }
    ]
  }
}).render();