JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

<select id="country">
  <option selected disabled> Select a Province</option>
  <option value=111338>USA</option>
  <option value=111434>UK</option>
  <option value=111756>Bangladesh</option>
  <option value=111239>India</option>
  <option value=111532>Pakistan </option>
</select>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
  title:{
    text: "Update Datapoints using Dropdown"
  },
  data: [
    {
      dataPoints: [
        { y: 107324, label: "USA" },
        { y: 107922, label: "UK" },
        { y: 107453, label: "Bangladesh"},
        { y: 107986, label: "India"},
        { y: 107233, label: "Pakistan" },
      ]
    }
  ]
});
chart.render();

var country = document.getElementById("country");
country.addEventListener( "change",  function(){
	for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
  	if(country.options[country.selectedIndex].text === chart.options.data[0].dataPoints[i].label )
    	chart.options.data[0].dataPoints[i].y = Number(country.options[country.selectedIndex].value);
  }
  chart.render();
});