JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="container">
  <div id="chartContainer" style="height: 360px; width: 100%;"></div>
  <img src="https://i.imgur.com/Pdr7Mvk.gif" id="loader"/>
</div>

CSS

.container {
  position: relative;
}

#loader {
  position: absolute;
  top: 120px;
  left: 45%;
  height: 100px;
}

JavaScript

var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text:"Rendering Chart with data from External JSON"
  },
  animationEnabled: true,
  data: [{
    type: "line",
    dataPoints : dataPoints,
  }]
});

$.when($.getJSON("https://api.npoint.io/ef034608b07f5a7ef817")).then(function(data) {  

  $.each(data, function(key, value){
    dataPoints.push({x: value[0], y: parseInt(value[1])});
  });	
  chart.render();

  $("#loader").hide();
});