JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<div class="container">

  <body>
    <center>
      <h1>Status das empresas </h1>
      <br> </center>
    <div>
      <canvas id="grafico" width="200" height="40"></canvas>
    </div>
  </body>
</div>

JavaScript

$(document).ready(function() {
  var dataResult;
  var data;
  var countOn = 0,
    countOff = 0;

  //substitui este array 'hard-coded' pela resposta do $.getJSON()
	var servicosWebAPI = "http://servicosweb.ibge.gov.br/GetStatus.ashx";
    $.getJSON(servicosWebAPI)
      .done(function(response) {
        data = response;  
      })
      .fail(function(response) {
         console.log("Serviços inoperantes");
       });
  if (data.length > 0) {
    for (var i in data) {
      if (data[i].Status === true) {
        countOn++;
      } else {
        countOff++;
      }
    }
    dataResult = [countOn, countOff];
	}
  var ctx = document.getElementById("grafico").getContext('2d');
  var pizza = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ["Serviços online", "Serviços offline"],
      datasets: [{
        backgroundColor: [
          "#3498db",
          "#000000",
        ],
        // id: 'gráfico',
        data: dataResult,
        options: {
          animation: {
            animateScale: true
          }
        }
      }]
    }
  });
});