Angular17+Bootstrap5下Highcharts柱状图X轴标签换行配置无效问题

针对你在Angular 17+Bootstrap 5环境下的Highcharts柱状图X轴标签配置问题，按以下方式调整配置即可实现水平（0度旋转）+自动换行：

正确配置代码 #

xAxis: {
  categories: ['Anayeli Bautista', 'Carlos Antonio Gallegos'],
  labels: {
    rotation: 0,
    useHTML: true, // 启用HTML渲染以支持自动换行
    style: {
      whiteSpace: 'normal',
      width: '80px', // 自定义标签宽度，超出自动换行
      textOverflow: 'none'
    },
    allowOverlap: false // 避免标签重叠，可选
  }
}

关键说明 #

• useHTML: true是核心：Highcharts默认用SVG渲染文本，SVG对white-space属性支持有限，开启HTML渲染后才能让whiteSpace: normal生效实现自动换行。
• 设置width强制换行：根据你的柱状图实际宽度调整这个值，确保长标签能在合理范围内换行。
• allowOverlap: false可选开启：如果标签数量较多，开启后Highcharts会自动优化标签位置，避免重叠。

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