chart.js

HTML

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
				<article>
					<h3>chart.js</h3>
					<div class="canvas-holder half">
						<canvas id="interactive-bar" width="400" height="250">
						</canvas>
					</div>
					<p>Chart.js provides default simple support for canvas tooltips on hover/touch, but you can extend chart interactions to trigger events in your application</p>
				</article>

JavaScript

function random() {
    return Math.round(Math.random() * 95);
}
var canvas = document.getElementById('interactive-bar'),
			ctx = canvas.getContext('2d'),
			microBar = new Chart(ctx).Bar({
				labels: new Array(7),
				datasets: [{
					fillColor : "rgba(239,241,245,1)",
					strokeColor : "rgba(0,0,0,0)",
					highlightFill: "rgba(230,233,240,1)",
					data: [random(), random(), random(), random(), random(), random(), random()]
				}]
			}, {
				animation: false,
				showScale: false,
				barShowStroke: false,
				tooltipXPadding: 10,
				tooltipYPadding: 6,
				tooltipFontSize: 18,
				tooltipFontStyle: 'bold',
				// Boolean - If we want to override with a hard coded scale
				scaleOverride: true,

				// ** Required if scaleOverride is true **
				// Number - The number of steps in a hard coded scale
				scaleSteps: 2,
				// Number - The value jump in the hard coded scale
				scaleStepWidth: 50,
				// Number - The scale starting value
				scaleStartValue: 0,
			});

		helpers.addEvent(canvas, 'mousemove', function(evt){
			var bars =microBar.getBarsAtEvent(evt);
			if (bars.length > 0){
				canvas.style.cursor = "pointer";
			}
			else {
				canvas.style.cursor = "default";
			}
		});

		helpers.addEvent(canvas, 'click', function(evt){
			microBar.options.animation = true;
			microBar.options.onAnimationComplete = function(){
				this.showTooltip(this.activeElements, true);
			};
			var bars = microBar.getBarsAtEvent(evt);
			helpers.each(bars, function(bar){
				bar.value = Math.max(random(), 5);
			});
			if (bars.length > 0){
				microBar.update();
			}
		});