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 start y-axis at 0 and finish above the data series max value so that the tooltip is displayed rightly. How can I set y-axis min and max values overriding default behaviour.
gRaphael provides no way to do this. In fact, it doesn't seem like there any active development or maintenance on Raphael or gRaphael.
So the only way to do this, is to hack g.line.js. The values you're after is on line 109-114:
The value
xdimandydimdefines the range of your chart in relation to your plotted values. The object returned by.snapEnds()takes this form:{ from: INT, to: INT, power: INT }. I have no idea what thepowerpart does, but it isn't used in g.line.js, so you can safely ignore it. What you want is to edit thefromandtoproperties. Let's expose those to your options:You can now change the values from your
Paper.linechart()options object:I hope this works for you!
While you're at it, you might want to fix this bug allowing opts.gutter to equal zero in g.line.js as well. Or you might use this fix to allow your linecharts to have a gap in them.