JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/min/g.raphael-min.js?raw=true"></script>
<script src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/min/g.bar-min.js?raw=true"></script>
<script src="http://github.com/DmitryBaranovskiy/g.raphael/blob/master/min/g.line-min.js?raw=true"></script>
<div style="width:500px;height:150px" id="div"></div>

JavaScript

var r = Raphael("div",400,150),
    fin = function () {
        this.flag = r.popup(this.x, this.y, this.value || "0").insertBefore(this).attr([{fill: "#bbbbbb"}]); 
    },
    fout = function () {
        this.flag.animate({opacity: 0}, 300, function () {this.remove();});
    },
    txtattr = { font: "12px sans-serif" };
var rr=r.linechart(0, 0, 400, 125, [0,1,2,3,4],[250,200,350,100,300], {axis: '0 0 1 0',axisxstep:4,symbol:'circle',width:1}).hoverColumn(fin, fout);
rr.axis[0].attr([{stroke: '#ccc', fill: "#bbbbbb"}]);