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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<div class="row">
	  <div id="da-gender" class="col-6">
	    <canvas id="gender" width="100%" height="300"></canvas>
	  </div>
	  <div id="da-rent" class="col-12">
	    <canvas id="rent" width="100%" height="300"></canvas>
	  </div>
	  <div id="da-gas" class="col-12">
	    <canvas id="gas" width="100%" height="300"></canvas>
	  </div>
	  <div id="da-bigmac" class="col-6">
	    <canvas id="bigmac" width="100%" height="300"></canvas>
	  </div>
	  <div id="da-demographics" class="col-6">
	    <canvas id="demographics" width="100%" height="300"></canvas>
	  </div>
	  <div id="da-income" class="col-12">
	    <canvas id="income" width="100%" height="300"></canvas>
	  </div>
</div>

JavaScript

var rent = {
	  chartType: "bar",
    chartTitle: "Rent/Own",
    data: [{
      state: "AK",
      rent: 60,
      own: 55,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      state: "AL",
      rent: 60,
      own: 55,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      state: "AR",
      rent: 60,
      own: 55,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      state: "AZ",
      rent: 60,
      own: 55,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   }]
}

var gas = {
	 chartType: "bar",
   chartTitle: "Gas prices",
	 data: [{      
  		state: "AK",
      gasoline: 3.6,
      diesel: 2.8,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      state: "AL",
      gasoline: 3.6,
      diesel: 2.8,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      state: "AR",
      gasoline: 3.6,
      diesel: 2.8,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      state: "AZ",
      gasoline: 3.6,
      diesel: 2.8,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   }]
}

var bigmac = {
	 chartType: "horizontalBar",
   chartTitle: "Big Mac Index",
   data: [{
      land: "Switzerland",
      value: 82,
      backgroundOne:"#8eb9f6"
   }]
}

var demographics = {	 
	 chartType: "horizontalBar",
   chartTitle: "Big Mac Index",
   data: [{
      race: "Switzerland",
      value: 82,
      backgroundOne:"#8eb9f6"
   }]
}

var income = {
	 chartType: "bar",
   chartTitle: "Gender Chart",
   data:[{
      percentage: 10,
      value: 0,
      backgroundOne:"#8eb9f6"
   }]
}

var gender = {
		type: "pie",
    labels: ["Male", "Female"],
    title: "Gender USA",
    datasets: [
        {
            backgroundColor: ["#8eb9f6","#d73425"],
            data: [65,35]
        }
    ]
};

var myStringArray = ["gender"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {

    var...