ApexCharts如何将Annotations标注置于折线系列下方？

方法一：用额外面积系列替代Annotations（推荐） #

ApexCharts没有直接配置annotations层级的选项，但可以通过添加面积图系列实现需求——把这个系列放在折线系列前面（渲染顺序靠后的系列会显示在上方）：

• 给需要填充的区域单独建一个面积系列，仅在目标区间设置有效数据，其余位置设为null或y轴最小值
• 隐藏这个系列的图例和tooltip，避免干扰主折线的展示
• 调整填充的透明度和颜色，匹配视觉需求

示例代码：

const options = {
  series: [
    // 填充用的面积系列（先定义，渲染在下层）
    {
      name: '填充层',
      type: 'area',
      data: [null, null, 25, 32, 40, 36, null, null],
      fill: {
        opacity: 0.3,
        colors: ['#FF9F43']
      },
      tooltip: { enabled: false },
      legend: { show: false }
    },
    // 主折线系列（后定义，渲染在上层）
    {
      name: '核心数据',
      type: 'line',
      data: [12, 18, 25, 32, 40, 36, 28, 22],
      stroke: { width: 2, colors: ['#26C6DA'] }
    }
  ],
  chart: {
    type: 'line',
    height: 380
  },
  yaxis: {
    min: 0
  }
};

const chart = new ApexCharts(document.getElementById('chart-container'), options);
chart.render();

方法二：通过CSS调整DOM层级（不推荐，依赖DOM结构） #

ApexCharts的annotations容器类是.apexcharts-annotations，折线系列容器是.apexcharts-series，可以通过CSS修改z-index强制调整层级：

.apexcharts-annotations {
  z-index: 1 !important;
}
.apexcharts-series {
  z-index: 2 !important;
}

注意：这种方法依赖ApexCharts的DOM结构，版本更新后可能失效，且会影响所有annotations的层级，需谨慎使用。

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