Colors fading in customizeChartElement API call

posted on August 17th, 2020

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:

First, the default chart color is converted from RGB/hex to HSL to retrieve the applied lightness value.
Then the retrieved lightness value is applied to the new color (in this case, purple) to get the corresponding color tint.
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

Colors fading in customizeChartElement API call

2 answers

Please login or Register to Submit Answer