React-ApexCharts直方图实现：轴标签、条形位置及Tooltip配置问题

我想用React-ApexCharts实现直方图，目标效果参考Chart.js的直方图样式：X轴标签数比条形数多1，条形严格处于相邻标签之间，Tooltip显示对应条形的区间（如“时长：6 - 7”）。

尽管ApexCharts官方支持histogram图表类型，但我始终无法复现该效果，目前遇到三个关键问题：

• X轴标签数量无法设置为条形数+1（比如示例中需要10个标签对应9个条形）
• 条形无法精准定位在相邻X轴标签之间
• Tooltip无法展示对应条形的相邻标签区间范围

当前调试的示例代码已在在线代码沙箱中编写，但一直卡壳无法推进。

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