JSFiddle - React, Tailwind, and code Playground

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CanvasJS Lazy Loading StockChart</title>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>

<div class="dummy-content text-center">
  <h2>Scroll Down to View StockChart</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ipsum lacus, porttitor sed fermentum vel, viverra ac massa. Curabitur euismod justo faucibus, vestibulum tortor et, molestie augue. Sed feugiat vel ex vel luctus. Phasellus ut pharetra nisl, id blandit justo. Nam sagittis tristique consectetur. Praesent suscipit dignissim lectus, tempus maximus lacus dictum tempor. Morbi metus quam, consectetur in condimentum a, elementum non nulla. Fusce enim mi, vestibulum id bibendum nec, maximus non nibh. Etiam convallis consequat lacus nec commodo. Sed quis fermentum quam. Aenean eget mauris a lorem rutrum iaculis id vel mauris. Sed interdum aliquet justo, eu aliquet turpis bibendum sit amet. Ut non ligula lectus. Praesent vitae enim ligula. Curabitur vitae mollis neque, non sagittis risus.
  </p>
  <p>
    Nunc vestibulum, neque quis convallis pulvinar, mauris arcu faucibus libero, vel vehicula enim massa pellentesque arcu. Curabitur id nibh a velit tincidunt gravida. Suspendisse finibus ultrices velit nec egestas. Duis fringilla ipsum vel arcu cursus varius. Sed posuere ut lacus ut tincidunt. Ut et tincidunt risus. Pellentesque ornare dapibus tortor vitae commodo. Etiam ultrices vulputate maximus. In consequat massa id tincidunt scelerisque. Morbi sodales enim nec est ultricies faucibus. Class aptent taciti sociosqu ad litora torquent per conubia...

CSS

.chart {
  max-width: 80%; 
  margin: auto;
  height: 450px;
}

.dummy-content {
  min-height: 100vh;
  font-size: 18px;
  max-width: 80%;
  margin: auto;
}

.text-center {
  text-align: center;
}

JavaScript

window.onload = function () {  
  var options = {
    title:{
      text:"StockChart with Numeric Axis"
    },
    animationEnabled: true,
    exportEnabled: true,
    charts: [{
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true
        }
      },
      axisY: {
        crosshair: {
          enabled: true,
          //snapToDataPoint: true
        }
      },
      data: data
    }],    
    rangeSelector: {
      inputFields: {
        startValue: 4000,
        endValue: 6000,
        valueFormatString: "###0"
      },

      buttons: [{
        label: "1000",
        range: 1000,
        rangeType: "number"
      },{
        label: "2000",
        range: 2000,
        rangeType: "number"
      },{
        label: "5000",
        range: 5000,
        rangeType: "number"
      },{
        label: "All",        
        rangeType: "all"
      }]
    }
  }

  function renderChart(event, visible) {
    if (visible == true) {
      var stockChart = new CanvasJS.StockChart(event.target, options);
      stockChart.render();
      // jQuery(event.target).off('inview', renderChart);
    } 
  }

  jQuery(".chart").each((index, container) => {
    jQuery(container).one('inview', renderChart);  
  })
  //var stockChart = new CanvasJS.StockChart("chartContainer",);

  //stockChart.render();    
}

var limit = 10000;    //increase number of dataPoints by increasing this
var y = 1000;
var data = []; var dataSeries = { type: "spline" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
  y += Math.round((Math.random() * 10 - 5));
  dataPoints.push({ x: i, y: y });
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);