JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div class="blankDiv">
  Scroll Down to See the chart
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div id="chartContainer-1" style="height: 400px;"></div>
        </div>
        <div class="col-md-6">
            <div id="chartContainer-2" style="height: 400px;"></div>
        </div>
    </div>
</div>

CSS

.blankDiv {
  height: 500px;
  width: 100%;
}

JavaScript

var options = [{
  animationEnabled: true,
  animationDuration: 2000,
  title: {
    text: "Ocupación Camas Hombres x Sector",
    fontFamily: "Times New Roman",
    fontSize: 20
  },
  axisY: {
    title: "Camas Hombres",
    suffix: "%",
    includeZero: false
  },
  data: [{
    bevelEnabled: true,
    type: "column",
    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}
    ]
  }]
},{
  animationEnabled: true,
  animationDuration: 2000,
  title: {
    text: "Ocupación Camas Mujeres x Sector",
    fontFamily: "Times New Roman",
    fontSize: 20
  },
  axisY: {
    title: "Camas Mujeres",
    suffix: "%",
    includeZero: false
  },
  data: [{
    bevelEnabled: true,
    type: "column",
    dataPoints: [
      { x: 10, y: 41 },
      { x: 20, y: 15},
      { x: 30, y: 35 },
      { x: 40, y: 58 },
      { x: 50, y: 65 },
      { x: 60, y: 13 },
      { x: 70, y: 18 },
      { x: 80, y: 91 },
      { x: 90, y: 55}
    ]
  }]
}];

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

//container object in which chart has to be created
chart.push($("#chartContainer-1"));
chart.push($("#chartContainer-2"));


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

function scrollFunction() {
  var currentScrollPos = document.documentElement.scrollTop+window.innerHeight;
  for(var i=0; i<chart.length; i++) {
    if(  currentScrollPos > offsetForChartToDisplay[i]) {
      //remove the event listener once all charts has been rendered
      if(chartAnimated.length == 3) {
        window.removeEventListener("scroll", scrollFunction);
        break;
      }
      //once the chart is animated, don't call render method again
      if(chartAnimated.indexOf(i) == -1) {
        chart[i].CanvasJSChart(options[i]);
       ...