Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Colors fading in customizeChartElement API call

Answered
Alex asked on August 17, 2020

Hi,
 
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?
 
Thanks

Attachments:
chart_colors_.png

2 answers

Public
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: https://jsfiddle.net/flexmonster/kmhjzrtg/
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, 
Vera

Public
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