ApexCharts横向堆叠柱状图不显示最小负数值求助

这是我当前的图表效果，我希望显示所有刻度标签[-300000, -150000, 0, 150000, 300000]，恳请提供帮助，任何建议都将不胜感激。

我的当前代码：

const series = [
    {
      name: 'Males',
      data: [120000, 50000, 10000, 120000, 50000, 10000],
    },
    {
      name: 'Females',
      data: [-200000, -151000, -70000, -250000, -151000, -70000],
    },
  ];
  const options = {
    chart: {
      id: 'horizontal-bar',
      stacked: true,
      toolbar: {
        show: false,
      },
    },
    colors: ['#68D241', '#FF0D35'],
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '60%',
        borderRadius: 5,
        borderRadiusWhenStacked: 'all' as const,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      width: 1,
      colors: ['#fff'],
    },
    legend: {
      show: false,
    },

    grid: {
      xaxis: {
        lines: {
          show: true,
        },
      },
      yaxis: {
        lines: {
          show: false,
        },
      },
    },
    xaxis: {
      categories: ['TRUE ICP', 'AC 03', 'AC 04', 'AC 05', 'AC 06', 'IC 02'],
      tickAmount: 4,
      labels: {
        formatter(val: string) {
          const formattedValue = `$${Math.abs(parseFloat(val)).toLocaleString()}`;
          return parseFloat(val) < 0 ? `-${formattedValue}` : formattedValue;
        },
      },
      axisBorder: {
        show: false,
      },
    },
    yaxis: {
      min: -300000,
      max: 300000,
      showAlways: true,
    },
  };

我尝试显示所有刻度标签，但负数值标签并未出现。我曾找到ApexCharts的相关Bug报告及修复记录，但问题仍未解决。

核心问题是你搞反了水平条形图的轴配置：当plotOptions.bar.horizontal: true时，y轴是分类轴（对应你的类别标签），x轴是数值轴（对应正负数值范围）。你之前把分类放在xaxis、数值范围放在yaxis，导致负刻度无法正确渲染。

修正后的配置如下，重点调整了轴的职责，并强制指定要显示的刻度：

const series = [
    {
      name: 'Males',
      data: [120000, 50000, 10000, 120000, 50000, 10000],
    },
    {
      name: 'Females',
      data: [-200000, -151000, -70000, -250000, -151000, -70000],
    },
  ];
const options = {
    chart: {
      id: 'horizontal-bar',
      stacked: true,
      toolbar: {
        show: false,
      },
    },
    colors: ['#68D241', '#FF0D35'],
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '60%',
        borderRadius: 5,
        borderRadiusWhenStacked: 'all' as const,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      width: 1,
      colors: ['#fff'],
    },
    legend: {
      show: false,
    },
    grid: {
      xaxis: {
        lines: {
          show: true,
        },
      },
      yaxis: {
        lines: {
          show: false,
        },
      },
    },
    // 数值轴：x轴，设置范围和强制显示的刻度
    xaxis: {
      min: -300000,
      max: 300000,
      // 强制指定要显示的刻度值
      tickPositions: [-300000, -150000, 0, 150000, 300000],
      labels: {
        formatter(val: string) {
          const formattedValue = `$${Math.abs(parseFloat(val)).toLocaleString()}`;
          return parseFloat(val) < 0 ? `-${formattedValue}` : formattedValue;
        },
      },
      axisBorder: {
        show: false,
      },
    },
    // 分类轴：y轴，放置类别标签
    yaxis: {
      categories: ['TRUE ICP', 'AC 03', 'AC 04', 'AC 05', 'AC 06', 'IC 02'],
      showAlways: true,
    },
  };

关键修改点：

• 将categories从xaxis移到yaxis，符合水平条形图的轴逻辑
• 在xaxis中设置min、max定义数值范围
• 添加tickPositions数组，明确指定要显示的所有刻度值，确保负刻度被渲染
• 删除原xaxis中的tickAmount，避免自动生成刻度覆盖自定义配置

这样调整后，所有目标刻度标签都会正确显示。

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