ApexCharts带负值面积图如何将自定义tooltip精确显示在标记点正上方

你只需要调整现有配置中tooltip段的参数，同时清理冗余配置即可实现预期效果，修改点如下： #

1. 核心调整项 #

• 在tooltip配置中新增intersect: true：仅当鼠标悬停在数据标记（marker）上时才触发tooltip，避免误触
• 新增followCursor: false：关闭tooltip跟随鼠标移动的特性，固定锚定到对应数据点
• 新增position: 'top'：指定tooltip默认展示在数据点的正上方
• 新增offsetY: -12：根据你的tooltip高度微调垂直偏移，避免遮挡marker，数值可根据实际样式自行调整；如果水平方向存在偏移，可额外新增offsetX参数微调数值即可
• 删除冗余配置：你现有配置中同时存在stroke和strokes两个重复配置项，保留其中一个即可，避免样式冲突

2. 修改后的完整tooltip配置示例 #

tooltip: {
  shared: false,
  intersect: true,
  followCursor: false,
  position: 'top',
  offsetY: -12,
  custom: function ({ series, seriesIndex, dataPointIndex, w }) {
    var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
    return (
      '<div class="custom-tooltip">' +
        '<div class="goal">' + data.title + '</div>' +
        '<div class="date">' + data.x + '</div>' +
      '</div>' +
      '<div class="flex-rectangle"/>'
    );
  }
},

3. 可选CSS补充（实现水平完全对齐） #

如果你的自定义tooltip宽度大于marker，可添加以下CSS保证tooltip水平居中指向marker：

.custom-tooltip {
  text-align: center;
  min-width: fit-content;
}
.flex-rectangle {
  margin: 0 auto;
  /* 原有小箭头样式保持不变即可 */
}

内容的提问来源于stack exchange，提问作者Raja Shaiyan Azad Khan