[Feature] Treemap: How to dynamically format / switch label content based on node area?

[ChandraShekar-22]

What problem does this feature solve?

I’m building a stock market heatmap using ECharts treemap and need to format labels dynamically based on the rendered node area (width × height).

For example:

• Large tiles → logo + symbol + % change
• Medium tiles → logo + symbol
• Small tiles → only logo
• Very small tiles → hide label

However, label.formatter does not receive layout information such as rect, while labelLayout receives rect but cannot change formatter templates reliably.

This makes it impossible to switch label content based on tile size.

What does the proposed API look like?

label: {
formatter: (params) => {
// params.rect is undefined here
return {logo|}\n{sym|${params.name}};
}
},

labelLayout: (params) => {
console.log(params.rect); // rect exists here

const area = params.rect.width * params.rect.height;

// Cannot change formatter here
// Cannot reliably pass area to formatter
}

Current limitation

• formatter → no access to geometry
• labelLayout → has geometry but cannot change formatter
• No documented way to switch label content based on node size

Current limitation

• formatter → no access to geometry
• labelLayout → has geometry but cannot change formatter
• No documented way to switch label content based on node size

Large tile → 🖼 logo + text + numbers
Medium tile → 🖼 logo + text
Small tile → 🖼 logo
Tiny tile → hidden