ApexChart柱状图设置offsetY=-30后100%数值数据标签触碰柱子问题

ApexChart默认将y轴最大值设为数据集的最大值（此处为100），图表顶部无多余预留渲染空间。100%数值对应的柱子已顶到y轴上限，即使配置了dataLabels.offsetY = -30，标签也会因缺少上方渲染空间与柱子顶部触碰。

方案1：新增y轴顶部padding（推荐，适配动态数据） #

无需固定y轴最大值，只需给y轴顶部预留足够空间即可适配你的offsetY配置，只需在原有配置中新增yaxis字段：

yaxis: {
  padding: {
    top: 30 // 预留30px顶部空间，和offsetY的-30对应，完全避免标签触碰
  }
}

方案2：固定y轴最大值（适合固定0-100%百分比场景） #

如果你的数据固定为0-100%的百分比值，可以直接将y轴最大值设为110，预留10%的顶部空间，还可按需隐藏超过100的刻度标签：

yaxis: {
  max: 110,
  labels: {
    formatter: function(value) {
      return value <= 100 ? `${value}%` : ''
    }
  }
}

const options = {
  chart: {
    type: 'column',
    background: 'transparent',
    toolbar: {
      show: false
    }
  },
  colors: [
    function ({ value }) {
      if (value >= minimumProfilePercentage) {
        return theme.palette.warning.main;
      }
      return theme.palette.info.main;
    }
  ],
  xaxis: {
    categories: ["A","B","C","D","E","F"],
    axisBorder: {
      show: false
    }
  },
  grid: {
    show: false
  },
  plotOptions: {
    bar: {
      columnWidth: '35%',
      dataLabels: {
        orientation: 'horizontal',
        position: 'top'
      }
    }
  },
  tooltip: {
    enabled: false
  },
  dataLabels: {
    style: {
      colors: [theme.palette.text.primary]
    },
    formatter(value) {
      return `${value}%`;
    },
    offsetY: -30
  },
  annotations: {
    yaxis: [
      {
        strokeDashArray: 5,
      }
    ]
  },
  // 新增的y轴配置
  yaxis: {
    padding: {
      top: 30
    }
  }
};

const chartSeries = [
  {
    data: [100, 20, 30, 40, 50, 60, 97]
  }
];

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