[Bug]: [Pie] Outer labels overlap and become unreadable when one slice dominates with many small slices (v2 regression)

[RuchitPatel14]

Describe the bug / 问题描述

Version: @ant-design/plots 2.6.8 (migrated from 1.2.6)

Environment: React 18

Description:
After upgrading from v1 (1.2.6) to v2 (2.6.8), the Pie chart's outer label layout breaks when there is one dominant slice and many small slices. Labels for the small slices stack on top of each other, overlap, and become completely unreadable. This worked correctly in v1.

Reproduction:

import { Pie } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const DemoPie = () => {
    const data = Array.from({ length: 50 }, (_, i) => ({
  type: `test ${i + 1}`,
  value: i === 1 ? 11000 : i + 1,
}))
  const config = {
    padding: 80,
    data: data,
    angleField: 'value',
    colorField: 'type',
    label: {
      text: 'value',
      position: 'outside',
      transform: [{ type: 'overlapHide' }]
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },
  };
  return <Pie {...config} />;
};

createRoot(document.getElementById('container')).render(<DemoPie />);

Expected behavior:
Labels should either auto-adjust spacing to avoid overlap, hide when space is insufficient, or provide a readable layout — as they did in v1.

Actual behavior:
All 50 outer labels render on top of each other around the small-slice side of the pie, making them completely illegible (see screenshot).

I already checked and tried all transforms and diff position https://ant-design-charts.antgroup.com/options/plots/label#transform

Screenshot:

v1 screenshot

Reproduction link / 复现链接

https://codesandbox.io/p/sandbox/9p88s4

Please try the above code snippet

Steps to Reproduce the Bug or Issue / 重现步骤

• https://codesandbox.io/p/sandbox/9p88s4
• try above code and compare v1 and v2

v1 https://ant-design-charts-v1.antgroup.com/en/examples/pie/basic/#outer-label
v2 https://ant-design-charts.antgroup.com/en/examples/statistics/pie/#outer-label

Version / 版本

2.6.8

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[dosubot]

This is a breaking API change between v1 and v2, not a bug. The v1 configuration label: { type: 'outer' } is not valid in v2.

The fix: Update your label configuration to v2 syntax:

const config = {
  appendPadding: 10,
  data,
  angleField: 'value',
  colorField: 'type',
  radius: 0.8,
  label: {
    position: 'spider',  // Use 'spider' instead of 'type: outer'
    text: (d) => `${d.type}\n ${d.value}`,
    transform: [{ type: 'overlapDodgeY' }]  // Prevents label overlap
  },
  interactions: [{ type: 'element-active' }],
};

Key changes from v1 → v2:

• type: 'outer' → position: 'outside' (or 'spider' for connector lines)
• formatter → text (with different function signature)
• New transform array for overlap handling

For charts with many small slices, the recommended approach is position: 'spider' with overlapDodgeY transform. If labels still overlap, you can also try:

• overlapHide - hides overlapping labels
• overflowHide - hides labels that don't fit within slices

Unfortunately, there's no official upgrade guide from v1 to v2 since the underlying engine changed from G2Plot to @antv/g2 v5.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[RuchitPatel14]

I checked all the transforms, but none seem to match v1. Using overlapHide only shows 1 or maybe 3 labels, but I need it to behave the same way it did in v1. Is there a way to achieve this?

position -> spider
transform: [{ type: 'overlapDodgeY' }]

[RuchitPatel14]

position -> spider
transform: [{ type: 'overlapDodgeY' }]

import { Pie } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const DemoPie = () => {
    const data = Array.from({ length: 50 }, (_, i) => ({
  type: `test ${i + 1}`,
  value: i === 1 ? 11000 : i + 1,
}))
  const config = {
    padding: 80,
    data: data,
    angleField: 'value',
    colorField: 'type',
    label: {
      text: 'value',
      position: 'spider',
      transform: [{ type: 'overlapDodgeY' }]
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },
  };
  return <Pie {...config} />;
};

createRoot(document.getElementById('container')).render(<DemoPie />);

[RuchitPatel14]

position -> spider
transform: [{ type: 'overlapHide' }]

import { Pie } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const DemoPie = () => {
    const data = Array.from({ length: 50 }, (_, i) => ({
  type: `test ${i + 1}`,
  value: i === 1 ? 11000 : i + 1,
}))
  const config = {
    padding: 80,
    data: data,
    angleField: 'value',
    colorField: 'type',
    transform: [{ type: 'stackY' }],
    label: {
      text: 'value',
      position: 'spider',
      transform: [{ type: 'overlapHide' }]
    },
    legend: {
      color: {
        title: false,
        position: 'right',
        rowPadding: 5,
      },
    },
  };
  return <Pie {...config} />;
};

createRoot(document.getElementById('container')).render(<DemoPie />);

still not matched with v1 design

v1 https://ant-design-charts-v1.antgroup.com/en/examples/pie/basic/#outer-label