JSFiddle - React, Tailwind, and code Playground

by Akihiko Kusanagi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id = 'myCanvas'> </canvas>

	<button id = 'btn' class= 'button'> 
		Data
	</button>

	<div id = "myModal" class="modal">
		<div class="modalContent">
			<span class = "close"> &times; </span>
			<canvas id="myChart"></canvas>
		</div>
	</div>

JavaScript

function renderChart(data, labels) {
	    var ctx = document.getElementById("myChart").getContext('2d');
	    var myChart = new Chart(ctx, {
	    	type: 'bar',
	        data: {
	        	labels: [
	            "GFA","GBA","NSA","FSR","Open Space Ratio","Sunlight Ratio","Ventilation Ratio","Stories"
	            ],
	            datasets: [{
	            	label: labels,
	            	data: [ 2.6, 30.6, 5.6, 6.4, 8.7, 2.1, 3.5, 9],
	            	borderColor: 'rgba(75, 192, 192, 0.2)',
	            	backgroundColor: 'rgba(75, 192, 192, 1)',
	            }]
	        },
	    });
	}



	var modal = document.getElementById("myModal");
	var btn = document.getElementById("btn");
	var span = document.getElementsByClassName("close")[0];

	btn.onclick = function () {
		modal.style.display = 'block'
		renderChart(null, 'label 1');
	}

	span.onclick = function() {
		modal.style.display = 'none';
	}

	window.onclick = function(event) {
		if (event.target == modal) {
			modal.style.display = 'none';
		}
	}