apache / apache/echarts

[Bug] pie.label.alignTo='labelLine' does not work with label.position='outside'

Open
#21,617 1 comment 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

6.0.0

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=hZC7CoMwFIZ3n-JsLg6tvSApHXqdhC7dikOKBw2kSdBoKcV3byJeqlSaJcn5P_4PjlSaSQFbeDsAOWYMcwI384Z6Yo9-KSTgKoau14xoKVkc0jvyS4kZp4qAzgpsY24T0hWY4lQ-hwiAkjmzblMtC52zuK83As4ScZUmq7tCJtBtwmpgsck_E0eR6JTAfDWe-QT8YNwbU03bHdR7gJLywliWMw8Efdhl7Nye_yIWQUfsJwi_Iw4TRG85_ib83nKaINYdcTZEA0T1bX-RU20-&enc=deflate

### Steps to Reproduce

1. Create a pie chart with external labels.
2. Use the following option:

```js
option = {
series: [{
type: 'pie',
avoidLabelOverlap: true,
label: {
show: true,
position: 'outside',
alignTo: 'labelLine'
},
labelLine: {
show: true,
length: 15,
length2: 28
},
data: [
{ value: 40, name: 'A' },
{ value: 38, name: 'B' },
{ value: 32, name: 'C' },
{ value: 30, name: 'D' },
{ value: 28, name: 'E' },
{ value: 26, name: 'F' }
]
}]
};
```

3. Observe the label layout.
4. Change only label.position from 'outside' to 'outer':

```js
label: {
show: true,
position: 'outer',
alignTo: 'labelLine'
}
```

5. Observe that the labelLine alignment behavior changes.

### Current Behavior

When `series-pie.label.position` is set to `'outside'`, `label.alignTo: 'labelLine'` does not appear to apply the same label-line alignment behavior.

Changing only `label.position` from `'outside'` to `'outer'` makes the `labelLine` alignment behavior work.

### Expected Behavior

If `'outside'` is a supported alias for external pie labels, it should behave the same as `'outer'` for `label.alignTo: 'labelLine'`.

Alternatively, if only `'outer'` is intended to support `alignTo`, the docs/types should make that distinction clear.

### Environment

```markdown
- OS: macOS 26.4.1 (Build 25E253)
- Browser: Chrome 148.0.7778.168
- Framework: none / plain ECharts option in the official editor
- Node: v22.22.1
- npm: 10.9.4
```

### Any additional comments?

This seems to be an alias inconsistency between `outside` and `outer`.

In the current `master` branch (`d6a812f8482f23933692ce3ab99d8bf73131835f`), `PieSeries.ts` allows both values, but `labelLayout.ts` only checks `position === 'outer'` for the `alignTo: 'labelLine'` branch.

As a workaround, mapping `label.position: 'outside'` to `'outer'` before passing the option to ECharts makes it work.

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.