JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="width: 100%; height: 300px;"></div> 
<div id="chartContainer2" style="width: 100%; height: 300px;"></div>

JavaScript

var chartOptions = {
  title:{
    text: "Top Oil Reserves"
  },
  data: [

    {
      dataPoints: [
        { x: 1, y: 297571, label: "Venezuela"},
        { x: 2, y: 267017,  label: "Saudi" },
        { x: 3, y: 175200,  label: "Canada"},
        { x: 4, y: 154580,  label: "Iran"},
        { x: 5, y: 116000,  label: "Russia"},
        { x: 6, y: 97800, label: "UAE"},
        { x: 7, y: 20682,  label: "US"},
        { x: 8, y: 20350,  label: "China"}
      ]
    }
  ]
}

var chart1 = new CanvasJS.Chart("chartContainer1", chartOptions);
chart1.render();

var chart2 = new CanvasJS.Chart("chartContainer2", chartOptions);
chart2.render();