The outofboundsClip option with filled charts has a bug


« 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
Please remember to link to the RGraph website - it helps me enormously with SEO (ie Google).
www.rgraph.net/backlink
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
Please remember to link to the RGraph website - it helps me enormously with SEO (ie Google).
www.rgraph.net/backlink
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
Please remember to link to the RGraph website - it helps me enormously with SEO (ie Google).
www.rgraph.net/backlink
Posted by Zsolt on 17th February 2017
Thanks

Add a reply

Important!
If you're writing to say "thanks for the help!" I'd really appreciate it if you could link to the RGraph website and/or mention RGraph on social media. There's more information if you click on this link. Thanks.

 




« Back to message list
If you like RGraph please share it: