Highcharts：调整最后一列宽度并添加列标题

1. 添加"Users"列标题 #

在y轴配置中新增title属性，指定标题文本并调整位置样式，即可在用户列上方显示标题：

yAxis: [
  {
    title: {
      text: 'Users',
      align: 'left',
      x: 10, // 调整标题水平偏移量
      style: {
        fontWeight: 'bold',
        fontSize: '14px'
      }
    },
    grid: {
      borderColor: '#EEF2F4',
    },
    tickLength: 0,
    categories: categoriesData,
    opposite: true,
    gridLineWidth: 1,
    labels: {
      useHTML: true,
      formatter() {
        const value = this.value;
        return value.name;
      },
    },
  },
]

2. 调整24小时时间列宽度 #

时间列的宽度由用户列宽度间接决定，通过设置y轴的width属性固定用户列宽度，时间列会自动占据图表剩余空间：

yAxis: [
  {
    width: 130, // 根据需求自定义用户列宽度，时间列宽度会随之适配
    // 其他原有配置...
  }
]

整合修改后的关键配置片段 #

let chartDraw = Highcharts.ganttChart(chart, {
  // ...原有chart配置
  yAxis: [
    {
      width: 130,
      title: {
        text: 'Users',
        align: 'left',
        x: 10,
        style: {
          fontWeight: 'bold',
          fontSize: '14px'
        }
      },
      grid: {
        borderColor: '#EEF2F4',
      },
      tickLength: 0,
      categories: categoriesData,
      opposite: true,
      gridLineWidth: 1,
      labels: {
        useHTML: true,
        formatter() {
          const value = this.value;
          return value.name;
        },
      },
    },
  ],
  // ...其他原有配置
});

补充说明 #

• 之前尝试的slotWidth用于控制甘特图任务条宽度，tickPositioner仅调整刻度位置，都无法影响轴列的宽度，因此达不到需求效果。
• 通过yAxis.width固定用户列宽度后，时间列会自动填充图表剩余区域，实现调整时间列宽度的目标。

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