Updating chart on button click - CanvasJS JavaScript Charts

Updating chart on button click - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<input type="number" id="dataSeries1" value=12><br>
<input type="number" id="dataSeries2" value=23><br>
<input type="number" id="dataSeries3" value=18><br>
<button id="update">Update Chart</button>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Coal Reserves of Countries"
  },
  data: [{
    type: "stackedColumn",
    dataPoints: [
    		{ y: 12,label: "USA" },
        
    ]
  },
  {
    type: "stackedColumn",
    dataPoints: [
      { y: 23,label: "USA" },
      
   	]
	},
  {
    type: "stackedColumn",
    dataPoints: [
      { y: 18,label: "USA" },
      
   	]
	}]
});

chart.render();

document.getElementById("update").addEventListener("click", function(e) {
	var a = document.getElementById("dataSeries1").value;
  var b = document.getElementById("dataSeries2").value;
  var c = document.getElementById("dataSeries3").value;
  console.log(typeof a)
  chart.data[0].dataPoints[0].y = parseInt(a);
  chart.data[1].dataPoints[0].y = parseInt(b);
  chart.data[2].dataPoints[0].y = parseInt(c);
  chart.render();
});