apache / apache/echarts

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

Open
#21,494 0 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.