Chart.js水平条形图Y轴标签未全部显示问题求助

当Y轴有几百个类别标签时，哪怕设置了autoSkip: false和stepSize: 1还是被隐藏，主要是因为Chart.js还有其他默认限制，以及图表容器高度不够。按下面的配置调整，就能强制显示所有标签（哪怕重叠）：

关键配置调整 #

修改你的Y轴配置，补充以下参数：

options: {
  responsive: true,
  maintainAspectRatio: false, // 取消宽高比限制，让图表能撑满容器高度
  scales: {
    y: {
      type: 'category', // 明确指定为类别轴，避免自动检测出错
      ticks: {
        autoSkip: false, // 强制不跳过任何标签
        maxRotation: 0, // 标签不旋转，保持单行
        minRotation: 0,
        font: {
          size: 6 // 你已设置的小字体
        },
        padding: 2 // 缩小标签上下内边距，节省空间
      },
      grid: {
        display: false // 可选：隐藏Y轴网格线，进一步节省空间
      }
    }
  },
  layout: {
    padding: {
      left: 80 // 给Y轴标签留足左侧空间，防止被容器截断
    }
  }
}

必须配合容器高度设置 #

几百个标签需要足够的垂直空间，给你的canvas容器设置足够高的样式：

<canvas id="yourChartId" style="height: 6000px; width: 100%;"></canvas>

（比如600个标签，每个按10px高度估算，600*10=6000px，可根据实际字体大小调整）

这样配置后，Chart.js就会强制渲染所有Y轴标签，哪怕它们会重叠在一起。

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