JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="width:100%;height:3000px;">
  <h3>Scroll down!</h3>
</div>
<div id="chartContainer0" class="graph" style="height: 300px; width: 100%;"></div>
<div id="chartContainer1" class="graph" style="height: 300px; width: 100%;"></div>

JavaScript

var options =  {
  animationEnabled: true,
  theme: "dark1", // "light1", "light2", "dark1", "dark2"
  title:{
    text: "Processos de apoio",
    fontWeight: "500",
    fontFamily: "Comfortaa",
    fontSize: "30"
  },
  axisY: {
    title: "Casos por ano",
    titleFontColor: "#ff6386",
    lineColor: "#ff6386",
    labelFontColor: "#ff6386",
    tickColor: "#ff6386",
    includeZero: true
  },
  data: [{        
    type: "column",  
    showInLegend: true, 
    legendMarkerColor: "#292929",
    legendText: "Casos por ano",
    dataPoints: [      
      { y: 557, label: "2013" },
      { y: 553,  label: "2014" },
      { y: 667,  label: "2015" },
      { y: 827,  label: "2016" },
      { y: 765,  label: "2017" },
      { y: 723, label: "2018" }
    ]
  }]
};  

var chart = [];
var offsetForChartToDisplay = [];
var chartAnimated = [];

chart.push(new CanvasJS.Chart("chartContainer0", options));
chart.push(new CanvasJS.Chart("chartContainer1", options));

for(var i=0; i<chart.length; i++) {
  offsetForChartToDisplay.push(chart[i].container.offsetTop + 150);  
}

function scrollFunction0() {

  var currentScrollPos = document.documentElement.scrollTop+window.innerHeight;
	console.log(chart);
  for(var i=0; i<chart.length; i++) {

    if(  currentScrollPos > offsetForChartToDisplay[i]) {
        if(chartAnimated.length == 3) {
          window.removeEventListener("scroll", scrollFunction);
          break;
        }
        if(chartAnimated.indexOf(i) == -1) {
          chart[i].render();
          chartAnimated.push(i);
        }
      }
  }
}
window.addEventListener("scroll", scrollFunction0);