ApexCharts数据点与X轴刻度不重合问题求助

如图所示，图表的tooltip（提示框）与数据绘图区域超前于X轴标签，如何让两者对齐？

以下是基础配置代码：

export const baseChartConfig = (): ApexOptions => {
  return {
    xaxis: {
      tickPlacement: 'between',
      tickAmount: 12,
      labels: {
        offsetX: 10,
        trim: true,
        hideOverlappingLabels: true,
        style: {
          fontSize: '11px'
        }
      }
    },
    yaxis: {
      labels: {
        offsetY: -5,
        style: {
          fontSize: '11px'
        },
        formatter: (value: number) => value.toFixed(0)
      },
      forceNiceScale: true,
      min: 0,
      max: (largestValue: number) => largestValue + 1
    },
    grid: {
      show: true,
      borderColor: 'var(--va-light-tertiary)',
      position: 'back',
      strokeDashArray: 3,
      padding: {
        top: 0,
        bottom: 0,
        right: 10,
        left: 10
      },
      xaxis: {
        lines: {
          show: true
        }
      },
      yaxis: {
        lines: {
          show: true
        }
      }
    },
    plotOptions: {
      bar: {
        columnWidth: '25%',
        borderRadius: 1
      }
    },
  }
}

已尝试移除padding（内边距）、offset（偏移量）等配置，但均无效果，且缩放图表后问题仍存在。

调整方案 #

问题核心是xaxis.tickPlacement: 'between'的设置，会让刻度标签落在数据点之间而非正下方，再加上offsetX的偏移，直接导致错位。按以下修改即可解决：

1. 修正X轴刻度放置逻辑
   将tickPlacement改为'on'，同时移除标签的X轴偏移，让标签对齐到数据点正下方：

xaxis: {
  tickPlacement: 'on', // 替换原有的'between'
  tickAmount: 12,
  labels: {
    offsetX: 0, // 清除不必要的偏移
    trim: true,
    hideOverlappingLabels: true,
    style: {
      fontSize: '11px'
    }
  }
},

2. 微调网格内边距（可选）
   如果修改后仍有细微错位，可将网格的左右内边距设为0，确保绘图区域与标签边界完全对齐：

grid: {
  padding: {
    top: 0,
    bottom: 0,
    right: 0,
    left: 0
  },
  // 其余网格配置保持不变
}

3. 强制tooltip对齐（可选）
   修正X轴配置后tooltip会自动对齐，若仍有偏移，可添加tooltip的偏移控制：

tooltip: {
  x: {
    offsetX: 0
  }
}

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