为Highcharts热力图Y轴标签添加底部边框的技术问询

我的Highcharts热力图当前Y轴标签为普通文本样式，现在需要给每个Y轴标签添加底部边框以优化样式，但尝试用formatter()函数包裹HTML元素添加边框后，标签整体位置上移，与热力图区块错位。由于Y轴标签数量是动态变化的，使用固定margin或offset无法适配所有情况。

尝试的代码 #

yAxis: {
    min: 0,
    max: caregap_nm.length - 1,
    categories: ['APPLES', 'ORANGES', 'PEARS', 'GUAVA', 'GRAPES', 'MELONS'],
    reversed: true,
    title: {
      align: 'high',
      offset: 0,
      text: '',
      rotation: 0,
      y: -20,
      x: -25,
      style: {
        fontSize: '16px',
        fontWeight: 600,
      },
    },
    labels: {
      useHTML: true,
      align: 'left',
      x: -100,
      style: {
        fontSize: '14px',
        fontWeight: 400,
      },
      formatter() {
        return `<div class="cg-y-labels"><span>${this.value}</span></div>`;
      },
    },
  },

方法1：用CSS伪元素添加边框（推荐，不破坏原生对齐） #

无需修改formatter逻辑，直接针对Highcharts原生标签容器添加伪元素实现底部边框，完全保留Highcharts的垂直对齐逻辑：

/* 定位Y轴标签容器，添加伪元素边框 */
.highcharts-yaxis-labels .highcharts-label {
  position: relative;
  /* 可选：限制标签宽度，避免边框过长 */
  width: 90px;
}
.highcharts-yaxis-labels .highcharts-label:after {
  content: '';
  position: absolute;
  bottom: -4px; /* 调整边框与文本的间距 */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc; /* 自定义边框颜色 */
}

若Y轴为反转状态（reversed: true），可将bottom改为top适配布局。

方法2：修复HTML容器的对齐问题 #

如果必须用formatter包裹HTML，需确保容器布局不干扰原生垂直对齐：

1. 修改labels配置中的formatter和样式：

labels: {
  useHTML: true,
  align: 'left',
  x: -100,
  style: {
    fontSize: '14px',
    fontWeight: 400,
    verticalAlign: 'middle', // 强制垂直居中
    lineHeight: '1.2', // 统一行高
  },
  formatter() {
    // 设置容器为行内块，垂直居中，避免破坏布局
    return `<div class="cg-y-labels" style="display: inline-block; vertical-align: middle; width: 90px; padding-bottom: 4px;">${this.value}</div>`;
  },
},

2. 对应CSS：

.cg-y-labels {
  border-bottom: 1px solid #ccc;
}

核心注意事项 #

• 不要给自定义HTML容器设置固定高度，否则动态标签数量会导致错位
• 优先利用Highcharts原生的标签定位，避免手动调整top/margin-top等属性
• 若标签对齐仍有问题，可检查Y轴的tickPosition或tickLength设置，确保刻度线与标签的对应关系正确

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