Page 2 of 2
Re: Area chart gradient bug
Posted: Thu Dec 10, 2015 12:59 pm
by yeray
Hello,
Try overriding bounds function instead of minYValue:
Code: Select all
area2.bounds=function(r) {
var h=this._horizAxis, v=this._vertAxis;
r.x=h.calc(this.minXValue());
r.width=h.calc(this.maxXValue())-r.x;
r.y=v.calc(Chart2.axes.left.maximum);
r.height=v.calc(Chart2.axes.left.minimum)-r.y;
}
- gradients.png (25.88 KiB) Viewed 6521 times
Re: Area chart gradient bug
Posted: Thu Dec 10, 2015 2:57 pm
by 15676988
Thanks a lot,
for helping us to find the problem while we were searching for a solution.
For our real chart we were using two areas (Line / Area). We just remove the Area and add some lines code to the end of doDrawLine() function in Line area:
Code: Select all
var gradient = a.createLinearGradient(0, a.canvas.height, 0, 0);
gradient.addColorStop(0, "rgba(0, 175, 240, 0)");
gradient.addColorStop(1, "rgba(0, 175, 240, 0.3)");
a.fillStyle = gradient;
var lastPointX = this.chart.axes.bottom.calc(this.maxXValue());
a.lineTo(lastPointX, a.canvas.height);
a.lineTo(0, a.canvas.height);
a.fill();
As a result we have a good line/area chart with perfect gradient doesn't matter if we change the min/max:
- Untitled.png (88.51 KiB) Viewed 6509 times
Best regards!
Re: Area chart gradient bug
Posted: Thu Dec 10, 2015 3:17 pm
by yeray
Hello,
I'm glad to hear you found how to make it work as you wish.
And congratulations for the great looking application!
