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 = {
	  type: "bar",
    title: "Rent/Own",
    labels: ["AK","AL","AR","AZ"],
    datasets: [{
      rent: 60,
      own: 55,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      rent: 60,
      own: 55,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      rent: 60,
      own: 55,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   },
   {
      rent: 60,
      own: 55,
      backgroundOne:"#8eb9f6",
      backgroundTwo:"#d73425"
   }]
}

var rent = {
	 type: "bar",
   title: "rent/Own",
   labels: ["SWitzerland","Germany"],
   datasets: [{
            backgroundColor: ["#8eb9f6", "#8eb9f6"],
            data: [82,-40]
   }] 
}

var gas = {
	 type: "bar",
   title: "Gas prices",
   labels: ["AK","AL","AR","AZ"],
 	 datasets: [{      
      label: "diesel",
      backgroundColor: "#3e95cd",
      data: [2.7,2.9,2.8,2.4]
   		},
 			{      
      label: "gasoline",
      backgroundColor: "#8e5ea2",
      data: [3.7,3.9,3.8,3.4]
   		}]
}

var bigmac = {
	 type: "horizontalBar",
   title: "Big Mac Index",
   labels: ["SWitzerland","Germany"],
   datasets: [{
            backgroundColor: ["#8eb9f6", "#8eb9f6"],
            data: [82,-40]
   }] 
}

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

var income = {
	 type: "bar",
   title: "Income USA",
   labels: ["10%", "20%", "30%", "40%", "50%","60%", "70%", "80%", "90%", "100%"],
   datasets: [
        {
            backgroundColor: ["#a1a1a1", "#a1a1a1","#a1a1a1","#a1a1a1","#a1a1a1","#a1a1a1","#a1a1a1","#a1a1a1","#a1a1a1","#a1a1a1"],
            data: [0,20000,40000,60000,80000,100000,120000,140000,160000,180000]
        }
   ]   
}

var gender = {
		type: "pie",
    labels: ["Male", "Female"],
    title: "Gender...