Angular ApexCharts.js中如何将饼图标签移至外部

要把饼图的标签移到外部，仅设置offsetY这类参数是不够的，需要配合position和formatter等核心配置，以下是调整后的实现方案：

修改后的TypeScript代码 #

@ViewChild('chart') chart!: ChartComponent;
public chartOptions: Partial<ChartOptions>;

constructor() {
  this.chartOptions = {
    series: [45, 50, 22],
    chart: {
      type: 'pie',
      width: '270px',
    },
    labels: ['Team A', 'Team B', 'Team C'],
    responsive: [
      {
        breakpoint: 480,
        options: {
          chart: {
            width: 100,
          },
        },
      },
    ],
    legend: {
      show: true,
      position: 'bottom',
      horizontalAlign: 'center',
    },
    dataLabels: {
      enabled: true,
      // 核心设置：将标签位置强制设为外部
      position: 'outside',
      // 自定义标签显示内容（直接返回对应标签文本）
      formatter: function(val, opts) {
        return opts.w.globals.labels[opts.seriesIndex];
      },
      // 控制标签与饼图扇区的距离
      distance: 30,
      // 微调标签的偏移位置（按需调整）
      offsetY: 0,
      offsetX: 0,
    },
  };
}

关键配置说明 #

• position: 'outside'：这是让标签移到外部的核心开关，默认dataLabels会显示在扇区内部，必须设置该参数才会触发外部布局逻辑
• formatter：自定义标签内容，默认会显示数值+百分比，这里直接返回对应标签文本，也可以修改为return opts.w.globals.labels[opts.seriesIndex] + ' ' + val + '%'来保留百分比
• distance：设置标签与扇区边缘的基础距离，可根据图表大小调整（比如20、30）
• offsetX/offsetY：在distance的基础上，微调标签的横向/纵向位置

注意事项 #

• 确保图表容器有足够宽度，避免外部标签被截断，可适当调大chart.width或优化responsive配置
• 如果标签显示重叠，可尝试调整distance或offset参数，也可以开启dataLabels.dropShadow增强可读性

内容的提问来源于stack exchange，提问作者Minvinta