JSFiddle - React, Tailwind, and code Playground

by Denis Plotnikov

HTML

<script src="//st1.craziegames.com/racing7/vk-dev/js.lib/jquery-ui.min.js"></script>
<div id="canvas">
</div>

CSS

#canvas {
	width:500px;
	height:300px;
	background-color:#ffffff;
	border:1px solid #dddddd;
	box-shadow:1px 2px 3px rgba(0,0,0,0.1);
	position:relative;
	overflow:hidden;
}
.bar{
	background:#0088cc;
	height:10px;
	width:10px;
	position:absolute;
	bottom:0px;
	left:0px;
	cursor:pointer;
	border-radius:0px 0px 0px 0px;
	box-sizing:border-box;
	border-top:3px solid rgba(0,0,0,0.15);
	border-bottom:3px solid rgba(0,0,0,0.15);
}
.bar:hover{
	opacity:0.9;
}
.barText {
	position:absolute;
	top:10px;
	left:0px;
	width:100%;
	font-size:13px;
	text-shadow:1px 1px 2px #111111;
	color:#ffffff;
	font-family:Tahoma;
	text-align:center;
	font-weight:bold;
	display:none;
}

JavaScript

'use strict';
var data = [
	{ day : '23 Mar 2016', value : 70 },
	{ day : '24 Mar 2016', value : 53 },
	{ day : '27 Mar 2016', value : 260 },
	{ day : '29 Mar 2016', value : 130 },
	{ day : '30 Mar 2016', value : 180 }
]

function drawChart( ) {
	document.getElementById('canvas').innerHTML = '';
	var maxValue = 0;
	var outHTML = '';
	var width = 500;
	var height = 300;
	var widthOneBar = 30;
	var paddingBetween = 2;
	for ( var i in data ) if ( data[i].value > maxValue ) maxValue = data[i].value;
	for ( var i = 0; i < data.length; i++ ) {
		let thisHeight = ( data[i].value / maxValue ) * height;
		let thisLeft = i*(widthOneBar+paddingBetween);
		outHTML += `<div onmouseover="$('.barText').hide(); $('#barText-v${i}').show();" onmouseleave="$('.barText').hide();" class="bar" style="width:${widthOneBar}px; height:${thisHeight}px; left:${thisLeft}px;"><div class="barText" id="barText-v${i}">${data[i].value}</div></div>`;
	}
	document.getElementById('canvas').innerHTML = outHTML;
	$('.bar').each( function(){
		  let thisHeight = $(this).css('height');
			//console.log(thisHeight);
			$(this).css('bottom', -parseInt(thisHeight,10) );
	});
	setTimeout( function(){ 
	$('.bar').animate({ bottom : 0 }, 500, 'easeOutSine');
	},1000);
}

drawChart();