Dynamic Color Mapping for Each Drilldown

[Brainweber Dev]

Hi Team,

We have a requirement to dynamically add color mapping to each drilldown.

We have achieved this by setting the colorMapping property on args.treemap.levels[args.groupIndex].colorMapping. ​​​But this gives issues when drilling up where some nodes have black color. Drill down works fine.

There is also an issue where the legends get concatenated on each drilldown.

Please let us know a solution to solve this issue.

Best Regards.

[Indumathi Ravi]

Dear Customer,

Thank you for contacting Syncfusion support.

Please find the details for your queries from the below table.

Queries	Details
We have a requirement to dynamically add color mapping to each drilldown.   We have achieved this by setting the colorMapping property on args.treemap.levels[args.groupIndex].colorMapping. But this gives issues when drilling up where some nodes have black color. Drill down works fine	The color specified in the “colorMapping” property is applied to the TreeMap leaf items based on the range values specified. When the range value matches with the weight value of the leaf item, the color will be applied. If the value does not match, the color will be set as “black”. This is the valid behavior of the TreeMap.   However, we can overcome this scenario by setting the “color” property without specifying “to”, “from” or “value” properties in the “colorMapping”. Please find the code snippet for the same below.   Code Snippet: drillEnd(args) {     if (       args.renderItems[0]['groupIndex'] == 0 &&       args.renderItems[0]['isDrilled'] &&       isDrillDown     ) {       if (args.renderItems[0]['name'] == 'Asia') {         args.treemap.levels[0].colorMapping = [           {             from: 4436223000,             to: 4436225000,             color: 'orange',           },           {             color: 'blue',           },         ];        }     }   We have created a sample to demonstrate the same and it can be found from the below link. https://stackblitz.com/edit/react-v2kcnc?file=index.js
There is also an issue where the legends get concatenated on each drilldown.	When we attempted to recreate the reported scenario in the TreeMap, we noticed a switching of legend items within the legend. Please find the sample and video in which we attempted to recreate the reported scenario.   Sample: https://stackblitz.com/edit/react-jnary7?file=index.js Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/drilldown-2128079166   Could you please confirm that the video above corresponds to your scenario? If not, please send us a video or modify the sample above to show the exact scenario. It will help us in analyzing and assisting you further.

Regards,

Indumathi R.