Skip to content

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

@xhugoliu

Description

@xhugoliu

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:
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' }
    ]
  }]
};
  1. Observe the label layout.
  2. Change only label.position from 'outside' to 'outer':
label: {
  show: true,
  position: 'outer',
  alignTo: 'labelLine'
}
  1. 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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugenThis issue is in EnglishpendingWe are not sure about whether this is a bug/new feature.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions