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 -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div>
  ViewportMinimum : <input id="viewportMinimum" type="text" placeholder="Enter ViewportMinimum" >
  &nbsp;&nbsp;
  ViewportMaximum : <input id="viewportMaximum" type="text" placeholder="Enter ViewportMaximum" >
  <button  id="setViewport" type="button"> Set Viewport</button> 
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Setting Viewport Based on User Input"
  },
  zoomEnabled: true,
  rangeChanged: function(e) {
    if(e.trigger === "reset") {
      for(var i = 0; i < e.chart.axisX.length; i++){
        e.chart.axisX[i].set("viewportMinimum", null); e.chart.axisX[i].set("viewportMaximum", null);
      }
      for(var i = 0; i < e.chart.axisX2.length; i++){
        e.chart.axisX2[i].set("viewportMinimum", null); e.chart.axisX2[i].set("viewportMaximum", null);
      }
      for(var i = 0; i < e.chart.axisY.length; i++){
        e.chart.axisY[i].set("viewportMinimum", null); e.chart.axisY[i].set("viewportMaximum", null);
      }
      for(var i = 0; i < e.chart.axisY2.length; i++){
        e.chart.axisY2[i].set("viewportMinimum", null); e.chart.axisY2[i].set("viewportMaximum", null);
      }
    }
  },
  data: [
    {
      type: "line",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
      ]
    }
  ]
});


chart.render();

var button = document.getElementById("setViewport"),
    vMin   = document.getElementById("viewportMinimum"),
    vMax   = document.getElementById("viewportMaximum"); 
button.addEventListener( "click",  setViewport);


//Function for setting viewport
function setViewport(){  
  if(vMax.value)
    chart.axisX[0].set("viewportMaximum", vMax.value);
  else 
    chart.axisX[0].set("viewportMaximum", null);

  if(vMin.value)
    chart.axisX[0].set("viewportMinimum", vMin.value);
  else 
    chart.axisX[0].set("viewportMinimum", null);
}