Consider the following code (sorry I was not able to put it on jsfiddle):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="raphael.js"></script>
<script src="g.raphael.js"></script>
<script src="g.bar.js"></script>
<script src="g.line-min.js"></script>
<body>
<div style="width:500px;height:150px" id="div"></div>
<script>
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([{fill: "#bbbbbb"}]);
</script>
</body>
I want to change the x-axis line color from black to grey. How can I do it?
Here you are:
http://jsfiddle.net/saxxi/GDCT5/1/