ChandraShekar-22 opened a new issue, #21494:
URL: https://github.com/apache/echarts/issues/21494
### 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
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
