ApexCharts技术问询：如何将y轴置于图表中央而非左右侧

要实现Y轴居中的对比图表，核心思路是隐藏默认两侧Y轴，通过自定义注释或双Y轴偏移的方式构建居中轴，并调整系列布局避免重叠，以下是两种可行方案：

方案一：使用注释功能构建居中Y轴 #

这种方式适合刻度固定的场景，通过注释绘制轴线和刻度标签，完全自定义样式：

1. 隐藏原始Y轴及网格
   先关闭默认的Y轴显示，避免干扰：

yaxis: {
  show: false,
  grid: {
    show: false
  }
}

2. 添加居中Y轴注释
   利用annotations在图表中心（0值位置）绘制轴线和核心刻度，如需更多刻度可添加多个注释项：

annotations: {
  yaxis: [
    {
      y: 0,
      borderColor: '#999',
      borderWidth: 1,
      borderDashType: 'solid',
      label: {
        text: '0',
        style: {
          color: '#333',
          fontSize: '12px',
          fontWeight: '500'
        }
      }
    },
    // 示例：添加正方向刻度
    {
      y: 50,
      label: {
        text: '50',
        style: { color: '#333', fontSize: '10px' }
      }
    },
    // 示例：添加负方向刻度
    {
      y: -50,
      label: {
        text: '-50',
        style: { color: '#333', fontSize: '10px' }
      }
    }
  ]
}

3. 调整系列偏移避免重叠
   给两个对比系列分别设置左右偏移，留出中间Y轴的空间：

series: [
  {
    name: '蓝色系列',
    data: [20, 35, 40, -10],
    offsetX: 18 // 向右偏移，避开中心轴
  },
  {
    name: '红色系列',
    data: [-25, -30, 15, -5],
    offsetX: -18 // 向左偏移，避开中心轴
  }
]

方案二：双Y轴偏移实现居中 #

这种方式适合动态数据场景，通过计算偏移量将Y轴移至中心：

1. 配置双Y轴
   主Y轴设置偏移量移至中心，副Y轴隐藏仅用于数据对齐：

yaxis: [
  {
    show: true,
    axisBorder: { show: true },
    axisTicks: { show: true },
    labels: {
      style: { color: '#333' },
      offsetX: 0 // 标签跟随轴线居中
    },
    // 动态计算偏移量：图表宽度的一半减去标签宽度（示例值为20）
    offset: function(chart) {
      return -(chart.width / 2 - 20);
    }
  },
  {
    show: false // 副Y轴不显示，用于匹配数据范围
  }
]

2. 绑定系列到对应Y轴
   确保两个系列都使用主Y轴或自动匹配，同时调整系列间距：

series: [
  {
    name: '蓝色系列',
    data: [20, 35, 40, -10],
    yaxisIndex: 0,
    offsetX: 15
  },
  {
    name: '红色系列',
    data: [-25, -30, 15, -5],
    yaxisIndex: 0,
    offsetX: -15
  }
]

注意事项 #

• 动态偏移建议在chart.events.render事件中计算，避免窗口大小变化导致轴线偏移错位；
• 注释方案的刻度需手动维护，适合固定范围的对比图表；双Y轴方案更适配动态数据的刻度自动生成。

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