Specifying a gradient per-bar in a multibar-per-row Gantt chart

« 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 James Wing on 19th June 2014
I'd like to specify the gradient to transition the color for EACH sequential event bar on the same "row" in a gantt chart. Specifying the gradient in the gantt constructor results in the color transition occuring accross ALL events, lumped together, rather than for EACH event individually.

A good illustration is here: www.rgraph.net/demos/gantt-multiple-events.html
The most visible illustration is the third row (labelled German). See how the transition from white to pink happens over all (vs. each) events on the row? I want it to transition all-the-way from white to pink in the first German event, then again all-the-way from white to pink in the second German event, then again in the third German event, and so on.

I thought that a workaround would be to add color stops to a custom linear gradient, the full length of all four events, just doing the math on-the-fly to figure out where along the way to place the stops to give the right appearance, but I cannot figure out how to get a handle to an event bar in order to create and apply such custom linear gradient.

Can anybody advise on how to do that? Thank you!

Posted by Richard on 20th June 2014
You will need to create the gradients yourself using the standard canvas API like this:

myGradient = myObject.context.createLinearGradient(x1, y1, x2, y2);
myGradient.addColorStop(0, 'red');
myGradient.addColorStop(1, 'blue');

Using the .coords property to get the x1/y1/x2/y2 coordinates. However, you only get those coords when the chart is drawn so you will need to draw the chart first, then create the gradients, assign them and redraw the chart. Here's an example:


Posted by Richard on 20th June 2014
Also, I think this should probably be the default behaviour for the Gantt since unlike the Bar chart the bars don't all start from the same position - so I'll look at making this change the default behaviour after the next stable release.

Posted by Richard on 22nd July 2014
This is now implemented - so try the next beta and see how it works for you.


Add a reply

« Back to message list