JSFiddle - React, Tailwind, and code Playground

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 -->
Enter X, Y Values &amp; Submit the form:
<form action="javascript:void(0);" id="dataPointsForm">
  X: <input type="number" id="xValue" value=1>
  Y: <input type="number" id="yValue" value=71>
  <input type="submit" value="Add DataPoint & Render Chart">
</form>
<br/>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Chart with Data from HTML Form"
  },
  data: [{
    type: "line",
    dataPoints: []
  }]
});

chart.render();


document.getElementById("dataPointsForm").addEventListener("submit", function() {
  var x = Number(document.getElementById("xValue").value);
  var y = Number(document.getElementById("yValue").value);

  chart.options.data[0].dataPoints.push({x: x, y: y});
  chart.render();
});