apache / apache/echarts

Treemap rich label alignment issue in echarts 5

Open
#14,128 9 comments 4 reactions 0 assignees View on GitHub
bug en
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version
5.0.1

### Steps to reproduce
1. Open Treemap example (https://echarts.apache.org/examples/en/editor.html?c=treemap-disk)
2. Add the following label configuration:
```js
// option.series ...
label: {
show: true,
formatter: (x) => `{blue|${x.name}}`,
rich: {
blue: {
color: "blue"
}
}
}
// ...
```
3. Notice labels are aligned in top left corner while they should be centered

### What is expected?
Labels are centered (except when configured otherwise)

### What is actually happening?
Labels are in top left corner

![image](https://user-images.githubusercontent.com/703419/105880933-32011700-6004-11eb-85fe-1cad9115919e.png)

---
Running the exact same code in the treemap demo of echarts 4 (https://echarts.apache.org/v4/examples/en/editor.html?c=treemap-disk) does not have this issue.

![image](https://user-images.githubusercontent.com/703419/105880982-447b5080-6004-11eb-90d2-e4be59fdb3c1.png)

Also, explicitly setting `align: "center", verticalAlign: "middle"` does not help; the label will get centered horizontally, but _not_ vertically.

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.