Get Free Trial

Colors fading in customizeChartElement API call

Alex asked on August 17, 2020

I have question about chart colors customization. I am using the customizeChartElement API call and it is not clear how the colors fading for nested groups of values can be implemented. (see attached screenshoot)
Could you please provide me an example of how it can be done?


2 answers

Vera Didenko Vera Didenko Flexmonster August 18, 2020

Hello, Alex,
Thank you for writing to us. 
We have prepared a JSFiddle where color fading for nested groups of values is implemented:
In the example, the chart color for "United States" is set to purple. 
For applying the color fading feature, the following approach is used:

  1.  First, the default chart color is converted from RGB/hex to HSL to retrieve the applied lightness value.
  2.  Then the retrieved lightness value is applied to the new color (in this case, purple) to get the corresponding color tint.
  3.  For simplicity, the TinyColor color tool JavaScript library was used for the color conversions.

Please let us know if this helps.
Looking forward to your response.
Kind regards, 

Alex August 19, 2020

Hello, Vera,
This is exactly what I’ve been looking for.
Thanks a lot

Please login or Register to Submit Answer