ChartJS如何在X轴显示yLabels中的全部标签（附代码示例）

问题描述 #

当前使用ChartJS绘制的横向柱状图，X轴仅在数据包含最大值5时才会显示New到Master的全部标签；当数据为3和1时，X轴只显示到Good，无法展示完整的5个等级标签，需要调整配置让X轴始终显示全部标签。

解决方案 #

核心是强制固定X轴的刻度范围与步长，让ChartJS不再根据数据自动调整刻度。具体修改如下：

• 在scales.x配置中添加min: 1和max: 5，固定X轴的刻度区间为1到5
• 添加stepSize: 1，确保每个整数刻度都被渲染出来
• 保留原有的ticks.callback逻辑，将刻度值映射为对应的等级文本

修改后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js"></script>
<div style="width:50%">
<canvas id="chart2" style="width:100%"></canvas>
</div>
<script>
var yLabels = {
    1 : 'New',
  2 : 'Learning Phase',
  3 : 'Good',
  4 : 'Strong',
  5 : 'Master'
}

Chart.register(ChartDataLabels);
new Chart('chart2', {
  type: 'bar',
  data: {
    labels: ['Tommy','Fred'],
    datasets: [{
      data: [3,1],
    }]
  },
  options: {
    indexAxis: 'y',
    layout: {
      padding: {
        right: 60
      }
    },
    plugins: {
      title: {
        display: true,
        text: "Skill Chart"
      },
      legend: {
        display: false,
      },
      datalabels: {
        color: 'blue',
            formatter: (value) => {
            if (value == 1) {
                value = 'New';
                return value;
            }
            if (value == 2) {
                value = 'Learning Phase';
                return value;
            }

            if (value == 3) {
                value = 'Good';
                return value;
            }
            if (value == 4) {
                value = 'Strong';
                return value;
            }
            if (value == 5) {
                value = 'Master';
                return value;
            }
            },
        anchor: 'end',
        align: 'right',
        labels: {
          title: {
            font: {
              weight: 'bold'
            }
          }
        }
      }
    },
    scales: {
      y: {
        grid: {
          display: false
        },
              ticks: {
        },
      },
      x: {
        min: 1, // 固定X轴最小刻度
        max: 5, // 固定X轴最大刻度
        ticks:{
          callback: function(value, index, values) {
                return yLabels[value];
            },
          precision: 1,
          stepSize: 1 // 设置刻度间隔为1，确保每个等级都显示
        },
          grid: {
            display: false,
          }
        }
    }
  }
});
</script>

原理说明 #

ChartJS默认会根据数据集的最小/最大值自动计算X轴的刻度范围，当数据最大为3时，默认刻度范围仅到3。通过手动设置min、max固定刻度区间为1-5，再用stepSize:1强制每个整数刻度都显示，就能确保X轴始终展示全部5个等级标签，不受数据范围影响。

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