Area chart gradient bug

[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 7727 times

[g.todorov]

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 7715 times

Best regards!

[Yeray]

Hello,

I'm glad to hear you found how to make it work as you wish.
And congratulations for the great looking application!