JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<script src="https://raw.github.com/iamwilhelm/g.raphael/master/g.raphael.js"></script>
<script src="https://raw.github.com/iamwilhelm/g.raphael/master/g.bar.js"></script>
<div id="holder"></div>

CSS

body {
    background: #999 url(http://raphaeljs.com/images/bgbg.png);
    font: 100.01% "Fontin Sans", Fontin-Sans, "Myriad Pro", "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Helvetica, sans-serif;
    color: #000;
    margin: 10px 0 0 0;
    padding: 0;
    text-align: center;
}
#holder {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px #666;
    background: #ddd url(http://raphaeljs.com/images/bg.png);
    margin: 0 auto;
    width: 640px;
    height: 480px;
}
p {
    text-align: left;
    margin: .5em 2em;
}

JavaScript

var r = Raphael("holder"),
    fin = function() {
        this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
    },
    fout = function() {
        this.flag.animate({
            opacity: 0
        }, 300, function() {
            this.remove();
        });
    },
    fin2 = function() {
        var y = [],
            res = [];
        for (var i = this.bars.length; i--;) {
            y.push(this.bars[i].y);
            res.push(this.bars[i].value || "0");
        }
        this.flag = r.popup(this.bars[0].x, Math.min.apply(Math, y), res.join(", ")).insertBefore(this);
    },
    fout2 = function() {
        this.flag.animate({
            opacity: 0
        }, 300, function() {
            this.remove();
        });
    },
    txtattr = {
        font: "12px sans-serif"
    };

r.text(160, 10, "Single Series Chart").attr(txtattr);
r.text(480, 10, "Multiline Series Stacked Chart").attr(txtattr);
r.text(160, 250, "Multiple Series Chart").attr(txtattr);
r.text(480, 250, "Multiline Series Stacked Chart\nColumn Hover").attr(txtattr);

r.g.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]])
    .hover(fin, fout)
    .label([['helloo', 'world']], false);
r.g.hbarchart(330, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]], {
    stacked: true
}).hover(fin, fout);
r.g.hbarchart(10, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]]).hover(fin, fout);
r.g.barchart(330, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]], {
    stacked: true,
    type: "soft"
}).hoverColumn(fin2, fout2);