The outofboundsClip option with filled charts has a bug

Share RGraph:  

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Zsolt on 16th February 2017
First of all, huge and spectacular job, congrats! The best javascript chart lib.

The bug: if you use filled line chart, the filled part is clipped properly, but the line isn't.

Regards,
Zs
Posted by Richard on 16th February 2017
Hi there,

Thanks for letting me know - I'll fix that for the next version.




Richard
Posted by Zsolt on 16th February 2017
Thanks,

related a bit: the filltype not working with gradient, when I try to modify with set (line.set('filltype', 'Gradient(...)');

sry :)

Zs
Posted by Richard on 16th February 2017
Hi there,

The spurious line issue with filled and overflowClip line charts is now resolved and for the gradients I couldn't reproduce it however you are using an incorrect property name. So try this instead:

line.set(
     'fillstyle', /* NOT filltype */
     'Gradient(red:black)'
);






Richard
Posted by Zsolt on 17th February 2017
Thanks for the quick fix and answer.
The fillstyle still not working for me. You right I misstyped the option name, but only in here, not in my live code.
the code is:
line = new RGraph.Line({
  id: 'cvs',
  data: data,
  options: {
   numxticks: 12,
   backgroundGridAutofitNumvlines: 12,
   ymax: maxData,
   gutterLeft: 35,
   textAccessible: true,
   yaxispos: 'right',
   filled: true,
   fillstyle: 'Gradient(white:red)',
   colors: ['black'],
   linewidth: 0.25,
   outofbounds: true,
   outofboundsClip: true,
   tooltips: tooltips
  }
}).draw();
       

if I create a line chart like above the gradient works fine.
when I try modify later (in a timer function):
   line.set('fillstyle', 'Gradient(white:blue)');
I get back a black filled graph
(if I set just a color - 'fillstyle', 'blue' - works fine)

I checked the context of line (if I remember correctly) it has a fillStyle attribute, which is a Gradient object, I tried to manipulate directly, but I'm not a canvas expert.

Zs
Posted by Richard on 17th February 2017
Hi there,

If you're doing it after the first draw, then you need to set a flag to get the colors parsed again (doing so on every draw would make effects a bit slower) So change your timer to this:

setTimeout(function ()
{
     line.colorsParsed = false;

     line.set(
         'fillstyle',
         'Gradient(red:black)'
     );

     RGraph.redraw();

}, 2500);


Richard
Posted by Zsolt on 17th February 2017
Thanks

Add a reply




« Back to message list