We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dynamic Color Mapping for Each Drilldown

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.


1 Reply

IR Indumathi Ravi Syncfusion Team October 28, 2022 12:24 PM

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.


Loader.
Live Chat Icon For mobile
Up arrow icon