nagix / chartjs-plugin-colorschemes

Predefined color schemes for Chart.js
MIT License
263 stars 58 forks source link

Stacking bars with colors that make sense #7

Closed PaulWieland closed 5 years ago

PaulWieland commented 5 years ago

I have a stacked series of bars. I would like to force the colors of the upper bar in the stack to be a ligher/less saturated hue than the lower color. Is this possible to do?

The default looks like this using brewer.Paired12.

I want to make the pink bar a lighter blue to match the bar below it, the red bar a light blue to match the dark blue below it, and so on.

Is it possible to reference the color in a series and adjust the saturation?

PaulWieland commented 5 years ago

I discovered a work around - You can access the global color schemes that come with the plugin like this:

var _chartcolors = Chart["colorschemes"].office.Aspect6;

And then assign them to the data series manually:

var i = 0; // in place of a for loop to build the series
//...
series1.backgroundColor = Color(window._chartcolors[i]).hexString();
//...
series2.backgroundColor = Color(window._chartcolors[i]).lighten(.5).hexString();

In this scenario we have series 2 stacked on top of series 1. Series 1 is the base color from the colors plugin, while series 2 is a lighter version of the same color.

JohnArcher commented 5 years ago

Could you also provide a screenshot for how it looks now working? Thanks!

PaulWieland commented 5 years ago

Here's what it looks like, though I have changed the chart theme to a completely custom color set: https://i.imgur.com/ba62tBg.png

JohnArcher commented 5 years ago

Very nice, now I understand. Looks cool. Thank you!