JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.raphael-min.js"></script>
<script src="https://raw.github.com/DmitryBaranovskiy/g.raphael/master/g.bar-min.js"></script>
<div id="bar_wrap"></div>
CSS
#pie_wrap { height: 500px; }
JavaScript
//bar chart
var bars = Raphael("bar_wrap"),
fin = function () {
this.flag = bars.g.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
};
fout = function () {
this.flag.animate({opacity: 0}, 300, function () {this.remove();});
};
bars.text(50, 10, "select area").attr({
font: '100 14px Serifa-Reg, Arial, sans-serif',
fill: "#333333",
'font-style': 'italic'
});
var b1data = [[319309], [305303], [534917]];
var b2data = [[268210], [263097], [359183]];
var b3data = [[373217], [064199], [201510]];
var bdata = JSON.parse(JSON.stringify(b1data));
var c = bars.g.barchart(200, 0, 300, 400, [bdata], {stacked: false, colors:["#999","#333","#666"]}).hover(fin, fout);
var bar_axis = bars.g.axis(250, 400, 200, null, null, 2, 2, ["2008", "2009", "2010"], "t", null);
var b1 = bars.text(20, 100, "b1").attr({
font: '100 20px Serifa-Reg, Arial, sans-serif',
fill: "#CB640F"
});
var b2 = bars.text(20, 200, "b2").attr({
font: '100 20px Serifa-Reg, Arial, sans-serif',
fill: "#333333"
});
var b3 = bars.text(20, 300, "b3").attr({
font: '100 20px Serifa-Reg, Arial, sans-serif',
fill: "#333333"
});
b1.click(function() {
b1.attr({
fill: "#CB640F"
});
b2.attr({
fill: "#333333"
});
b3.attr({
fill: "#333333"
});
bdata = JSON.parse(JSON.stringify(b1data));
b_animate();
});
b2.click(function() {
b1.attr({
fill: "#333333"
});
b2.attr({
fill: "#CB640F"
});
b3.attr({
fill: "#333333"
});
bdata = JSON.parse(JSON.stringify(b2data));
b_animate();
});
b3.click(function() {
b1.attr({
fill: "#333333"
});
b2.attr({
...