Sort Legend on Treemap

[Brainweber Dev]

Hi, 
I need to sort the legend as necessary. Tried modifying the legendCollections and totalPages[0].Collection

Please provide a working example to refer.

[Indumathi Ravi]

Dear Customer,

We have a few questions to better understand your requirements.

1. Is the screenshot with legend in ascending order provided from an external source or created using our Syncfusion TreeMap? Please share the code snippet or sample if it was taken with Syncfusion TreeMap.
2. We prepared a sample (Sample Link: https://stackblitz.com/edit/react-5sk8z3-ieftrb?file=index.js) with color mapping and observed legend placement in an irregular order. Could you please confirm if you are experiencing the same thing? Also, is this the reason for the required ordered order?

Please provide us with more information on the above questions so that we can better assist you.

Regards,

Indumathi R.

[Brainweber Dev]

Hi,

Yes, the screenshot legend was created with syncfusion treemap.

I checked the provided the sample link and can confirm that is the exact behaviour we are experiencing. We would like the legends to be sorted in ascending or descending depending on the requirement.

Regards

[Indumathi Ravi]

Dear Customer,

Thank you for the update.

Based on the objects added to the "colorMapping" property, the legend items can be sorted in a specific order. For example, the first object in the "colorMapping" array with the "from" and "to" properties will be rendered as first item in the legend. This is supposed to be the behaviour of the TreeMap's "colorMapping" and legend. However, currently, it is not proper in the TreeMap component. So, we have considered this as a defect and logged a defect report for the same. However, we will include the fix for the reported issue in our weekly patch release, which is expected to be available by the fourth week of November 2022. Please find the feedback link below to keep track of the reported issue.

https://www.syncfusion.com/feedback/38789

Regards,

Indumathi R.

[Indumathi Ravi]

We have fixed the reported issue - “Legend items are in an irregular order in the TreeMap” and included the fix in our weekly patch release(v20.3.59). Please update the “ej2-treemap” and “ej2-react-treemap” packages to latest version in your application to resolve the reported issue. Please find the package links below.

 

https://www.npmjs.com/package/@syncfusion/ej2-treemap

https://www.npmjs.com/package/@syncfusion/ej2-react-treemap

 

We have created a sample to demonstrate the same and it can be found from the below link.

https://stackblitz.com/edit/react-5sk8z3-qj2oup?file=index.js

 

Please let us know if you need any further assistance.

[Brainweber Dev]

Hi Team,

Thank you for the fix. This patch fixed the legend sort order issue on the initial load of the treemap. But it does not work when adding color mapping dynamically on each drilldown. 

I have recreated the issue in the below link.

https://stackblitz.com/edit/react-5sk8z3-hamm3j?file=index.js

Please check and let me know.

Regards.

[Indumathi Ravi]

In the provided sample, you have set color mapping to the “levels” and “leafItemSettings” properties and the color mapping values are dynamically added to the levels in the TreeMap component. However, in the TreeMap component, legend items are rendered first for levels and then for leaf items. This is not an issue with the component. This is the current behavior of the TreeMap component when rendering the legend.

[Brainweber Dev]

Hi,
Is there a way to manually re-render the legends on each drilldown?
We need the legends to be sorted on each drilldown as we are dynamically adding color ranges for each level.

[Indumathi Ravi]

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

 

Queries	Details
Is there a way to manually re-render the legends on each drilldown?	To achieve your scenario, you can add color mapping to the “levels” and “leafItemSettings” properties on each drill down using “drillStart” event to render the legend. We have created a sample to demonstrate the same and it can found from the below link.   Sample: https://stackblitz.com/edit/react-5sk8z3-vyl9am?file=index.js Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/tree269998211
We need the legends to be sorted on each drilldown as we are dynamically adding color ranges for each level.	As previously stated, you have set color mapping to the “levels” and “leafItemSettings” properties in your application. So, in the TreeMap component, legend items are rendered first for levels and then for leaf items. This is the current behavior of the TreeMap component. We cannot sort this manually as workaround.

 

Please let us know if you need any further assistance.