I am creating a stacked bar chart using jQuery a bunch of DIVs. The segments of each stack are colored with different shades of gray. I would like to encode an additional global value onto the bar chart by changing the saturation of the divs to cause their color to vary from gray to some shade color, while preserving the relative brightness. The obvious option is to modify the HSL value of each element individually.
Am I overlooking some more clever way of tweaking the color of the bars? I don’t think I can use the background color of the container, as the bars cannot be transparent.
I think this project would do exactly what you are asking for!
It adds support to animate colors using jQuery.
Check out this demo