JSFiddle - React, Tailwind, and code Playground

by Nikola Mihin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap-grid.css">
<div class="row">
	  <div id="da-bigmac" class="col-12">
	    <canvas id="demographics" width="100%" height="50"></canvas>
	  </div>
</div>

JavaScript

//STATE NAMES
     /* var states = ["AK", "AL", "AR", "AZ", "CA", "CO", "CT", "DC", "DE", "FL", "GA", "HI", "IA", "ID", "IL", "IN", "KS", "KY", "LA", "MA", "MD", "ME", "MI", "MN", "MO", "MS", "MT", "NC", "ND", "NE", "NH", "NJ", "NM", "NV", "NY", "OH", "OK", "OR", "PA", "RI", "SC", "SD", "TN", "TX", "UT", "VA", "VT", "WA", "WI", "WV", "WY"];
      var percentages = ["10%", "20%", "30%", "40%", "50%","60%", "70%", "80%", "90%", "100%"];

*/


      var demographics = {   
         type: "pie",
         labels: ["White", "Black or African American", "Hispanic", "Asian"],
         title: "Demographics USA",
         datasets: [{
                  backgroundColor: ["#8eb9f6", "#b5c244","#e4b859","#d73425"],
                  data: [44.6,25.1,27.5,11.8]
         }] 
      }

      //CHART FUNCTION
      var chartArray = ["demographics"];
      var arrayLength = chartArray.length;
      for (var i = 0; i < arrayLength; i++) {

          var canvas = document.getElementById(chartArray[i]);
          var ctx = canvas.getContext("2d");

          var chart = new Chart(ctx , {
             showTooltips: false,
          onAnimationComplete: function () {

              var ctx = this.chart.ctx;
              ctx.font = this.scale.font;
              ctx.fillStyle = this.scale.textColor
              ctx.textAlign = "center";
              ctx.textBaseline = "bottom";

              this.datasets.forEach(function (dataset) {
                  dataset.points.forEach(function (points) {
                      ctx.fillText(points.value, points.x, points.y - 10);
                  });
              })
          },
              type: eval(chartArray[i]).type,
              options: {
              	showAllTooltips: true,
                title: {
                  display: true,
                  text: eval(chartArray[i]).title
                }
              },
              data: eval(chartArray[i]), 
          });
      }