Treemap chart - Sort by name instead of value

Question

In eCharts Treemap chart, is it possible to display the blocks based on the name instead of value?

Go to https://echarts.apache.org/examples/en/editor.html?c=treemap-simple and replace the left panel with the following code:

option = {
    series: [{
        type: 'treemap',
        data: [
        {
            name: 'AAA',            // First tree
            value: 30
        }, 
        {
            name: 'BBB',            // Second tree
            value: 20
        },
        {
            name: 'CCC',            // First tree
            value: 45
        }        
    ]}
]};

TreeMap chart is displayed in the below order: CCC, AAA and BBB. Is it possible to make it to display it in alphabetical order (AAA, BBB, CCC) instead?

From what I know and what I read in the documentation, EChart's Treemap doesn't have any function that allows re-ordering of the series. Highest values will always be on the top-left corner. — Ryo Shiina
Thanks @RyoShiina. Any idea if this is the intended behavior? — Bala
I don’t think it’s “intended”, just forgotten I guess : when making a treemap, you don’t directly compare the values between them but the proportion they take in the whole set of data. Having (numerically) unordered items in such kind of chart would just make it harder to find the highest/lowest values ; it’s my personal explanation of why the devs might not feel the need to add that functionality. — Ryo Shiina

Mouad Alami Ghmari Mouad Alami Ghmari · Accepted Answer · 2019-11-12T15:33:14

In order to sort your data you need to disable their default sort and make your own, this is how you can do that :

option = {
    series: [{
        type: 'treemap',
        data: [{
            name: 'CCC',            // Third tree
            value: 40
        },{
            name: 'AAA',            // First tree
            value: 40
        }, {
            name: 'BBB',            // Second tree
            value: 40
        }].sort((a,b)=>{
            return a.name > b.name ? 1 : -1;
        }),
        sort:null
    }]
};

Treemap chart - Sort by name instead of value

1 Answers