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
close icon

Sort Legend on Treemap

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

Please provide a working example to refer.

4 Replies

IR Indumathi Ravi Syncfusion Team October 31, 2022 10:22 AM

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.


Indumathi R.

BD Brainweber Dev October 31, 2022 10:53 PM


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.


IR Indumathi Ravi Syncfusion Team November 1, 2022 09:59 AM

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.



Indumathi R.

IR Indumathi Ravi Syncfusion Team November 30, 2022 09:03 AM

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.





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



Please let us know if you need any further assistance.

Live Chat Icon For mobile
Up arrow icon