Highcharts堆叠条形图Y轴堆叠标签显示不全问题求助

我来给你几个实用的解决方案，你可以根据自己的需求来选：

方法1：增加图表右侧边距，给标签预留空间 #

最简单的方式就是给图表右侧加足够的边距，让长标签能完整显示。只需要在chart配置里添加marginRight属性，设置一个合适的数值（比如100）：

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    marginRight: 100 // 增加右侧边距，给长标签留出显示空间
  },
  title: { text: 'Stacked bar chart' },
  xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] },
  yAxis: {
    min: 0,
    title: { text: 'Total fruit consumption' },
    stackLabels: {
      enabled: true,
      align: 'right',
      style: { 
        color: '#838383', 
        fontSize:"12px", 
        fontWeight:"normal",
        width:'60px' 
      }
    }
  },
  legend: { reversed: true },
  plotOptions: { series: { stacking: 'normal' } },
  series: [
    { name: 'John', data: [5555555555555, 3, 4, 7, 2] },
    { name: 'Jane', data: [2, 2, 3, 2, 1] },
    { name: 'Joe', data: [3, 4, 4, 2, 5] }
  ]
});

方法2：格式化标签文本，缩短过长数字 #

如果不想调整图表布局，可以通过formatter函数把超大数字转换成简洁的带单位格式（比如K、M、B、T），这样标签长度会大幅缩短，自然不会被遮挡：

Highcharts.chart('container', {
  chart: { type: 'bar' },
  title: { text: 'Stacked bar chart' },
  xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] },
  yAxis: {
    min: 0,
    title: { text: 'Total fruit consumption' },
    stackLabels: {
      enabled: true,
      align: 'right',
      style: { 
        color: '#838383', 
        fontSize:"12px", 
        fontWeight:"normal",
        width:'60px' 
      },
      // 自定义格式化函数，把大数字转成带单位的缩写
      formatter: function() {
        const num = this.total;
        if (num >= 1e12) return (num / 1e12).toFixed(2) + 'T';
        if (num >= 1e9) return (num / 1e9).toFixed(2) + 'B';
        if (num >= 1e6) return (num / 1e6).toFixed(2) + 'M';
        if (num >= 1e3) return (num / 1e3).toFixed(2) + 'K';
        return num.toString();
      }
    }
  },
  legend: { reversed: true },
  plotOptions: { series: { stacking: 'normal' } },
  series: [
    { name: 'John', data: [5555555555555, 3, 4, 7, 2] },
    { name: 'Jane', data: [2, 2, 3, 2, 1] },
    { name: 'Joe', data: [3, 4, 4, 2, 5] }
  ]
});

方法3：调整标签位置，移到条形内部显示 #

你也可以把标签的对齐方式改成left，让它显示在条形内部，再通过x偏移调整位置，这样就不会超出图表边界：

Highcharts.chart('container', {
  chart: { type: 'bar' },
  title: { text: 'Stacked bar chart' },
  xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] },
  yAxis: {
    min: 0,
    title: { text: 'Total fruit consumption' },
    stackLabels: {
      enabled: true,
      align: 'left', // 标签左对齐，放在条形内部
      x: 10, // 向右偏移一点，避免贴边
      style: { 
        color: '#ffffff', // 改成白色，和深色条形形成对比
        fontSize:"12px", 
        fontWeight:"normal"
      }
    }
  },
  legend: { reversed: true },
  plotOptions: { series: { stacking: 'normal' } },
  series: [
    { name: 'John', data: [5555555555555, 3, 4, 7, 2] },
    { name: 'Jane', data: [2, 2, 3, 2, 1] },
    { name: 'Joe', data: [3, 4, 4, 2, 5] }
  ]
});

至于你提到的“设置条形图最大长度”，其实可以通过给yAxis设置max属性来限制，但这样会导致超出最大值的条形被截断，数据显示不完整，除非你能接受这种权衡，否则不太推荐这种方式。

内容的提问来源于stack exchange，提问作者I.ali