ApexCharts中柱状图高度过小时数据标签不可见的解决方法

问题 #

柱状图中第2、3、4个元素的数值分别为2、1、1，因远小于20导致顶部数据标签无法显示；数值为3时标签可正常显示。当前使用的series和options配置代码如下：

const series = [
    {
      name: name ? name : ' ' + subName ? subName : ' ',
      data: data?.length > 0 ? data : [0],
    },
  ];

  const barColor = color ? color : '#2564DE';

  const options = {
    fill: {
      opacity: 1,
    },
    colors: [barColor],

    grid: {
      xaxis: {
        lines: {
          show: false,
        },
      },

      yaxis: {
        lines: {
          show: false,
        },
      },
    },
    //data on the x-axis
    chart: {
      stacked: true,
      id: 'bar-chart',
      toolbar: {
        show: false,
      },
    },

    xaxis: {
      categories: categories?.length > 0 ? categories : ['undefined'],
      labels: {
        rotate: 0,
        hideOverlappingLabels: false,
      },

      lines: {
        show: false, //or just here to disable only y axis
      },
      axisTicks: {
        show: false,
      },
      crosshairs: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
    dataLabels: {
      offsetY: -18,
      style: {
        fontSize: '12px',
        colors: ['#304758'],
      },
      formatter: function (value: string) {
        return translatedNumValue(value.toString());
      },
    },
    plotOptions: {
      bar: {
        borderRadius: 0,
        columnWidth: getPercentWidth(300, data?.length, 40),
        dataLabels: {
          position: 'top', // top, center, bottom
        },
      },
    },

    yaxis: {
      axisTicks: {
        show: false,
      },
      crosshairs: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      lines: {
        show: false, //or just here to disable only y axis
      },
      labels: {
        show: false,
      },
    },
    tooltip: {
      custom: function ({ dataPointIndex }: any) {
        const title = categories[dataPointIndex];
        const value = data[dataPointIndex];

        return `<div class="p-3 bg-primary-white space-y-2">
                    <div class="font-bold">${title?.join(' ')}</div>
                    <div>${name}: <span class="font-bold">${translatedNumValue(
          value.toString(),
        )}</span></div>
                </div>
    `;
      },
    },
  };

解决办法 #

有两种可行方案，按需选择：

方案1：设置柱状图最小高度 #

在plotOptions.bar中添加minHeight属性，指定柱子的最小像素高度，确保矮柱子也有足够空间显示顶部标签：

plotOptions: {
  bar: {
    borderRadius: 0,
    columnWidth: getPercentWidth(300, data?.length, 40),
    dataLabels: {
      position: 'top', // top, center, bottom
    },
    minHeight: 10, // 可根据需求调整最小高度数值
  },
},

设置后，即使数值很小，柱子也会保持指定的最小高度，数据标签就能正常显示。

方案2：强制显示数据标签（不改变柱子高度） #

如果不想调整柱子高度，可通过dataLabels.alwaysShow强制显示标签，同时可微调offsetY优化标签位置：

dataLabels: {
  offsetY: -18,
  style: {
    fontSize: '12px',
    colors: ['#304758'],
  },
  formatter: function (value: string) {
    return translatedNumValue(value.toString());
  },
  alwaysShow: true, // 强制显示所有数据标签
},

若标签位置偏移明显，可调整offsetY数值（如改为-10），让标签更贴近柱子顶部。

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