Area chart gradient bug

TeeChart for JavaScript for the HTML5 Canvas
Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Area chart gradient bug

Post by Yeray » Thu Dec 10, 2015 12:59 pm

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
gradients.png (25.88 KiB) Viewed 6438 times
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

g.todorov
Newbie
Newbie
Posts: 14
Joined: Tue Nov 17, 2015 12:00 am

Re: Area chart gradient bug

Post by g.todorov » Thu Dec 10, 2015 2:57 pm

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
Untitled.png (88.51 KiB) Viewed 6426 times
Best regards!

Yeray
Site Admin
Site Admin
Posts: 9514
Joined: Tue Dec 05, 2006 12:00 am
Location: Girona, Catalonia
Contact:

Re: Area chart gradient bug

Post by Yeray » Thu Dec 10, 2015 3:17 pm

Hello,

I'm glad to hear you found how to make it work as you wish.
And congratulations for the great looking application! :!:
Best Regards,
ImageYeray Alonso
Development & Support
Steema Software
Av. Montilivi 33, 17003 Girona, Catalonia (SP)
Image Image Image Image Image Image Please read our Bug Fixing Policy

Post Reply