Showing x Value of first dataPoint in viewPort - CanvasJS JavaScript Charts

Showing x Value of first dataPoint in viewPort - 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>
<label>X value for first dataPoint: </label>
<input id="minXValue" type="text" size="10" readonly>
<br/>

JavaScript

var minXValue = document.getElementById("minXValue");

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  zoomType: "x",
  interval: 10,
  rangeChanged: function(e) {
    if (e.trigger != "reset") {
    	console.log(e)
      for (var i = 0; i <= e.chart.data[0].dataPoints.length; i++) {
        if (e.chart.data[0].dataPoints[i].x >= e.axisX[0].viewportMinimum) {
          minXValue.setAttribute("Value", e.chart.data[0].dataPoints[i].x);
          break;
        }
      }
    } else {
      minXValue.setAttribute("Value", e.chart.data[0].dataPoints[0].x);
    }
  },
  data: [{
    type: "line",
    dataPoints: [
      { x: 10, y: 26 },
      { x: 20, y: 38 },
      { x: 30, y: 43 },
      { x: 40, y: 29 },
      { x: 50, y: 41 },
      { x: 60, y: 54 },
      { x: 70, y: 66 },
      { x: 80, y: 60 },
      { x: 90, y: 53 },
      { x: 100, y: 60 }
    ]
  }]
});
chart.render();