Chart.js X轴底部标签换行及旋转90度后居中对齐失效问题

方案一：调整刻度配置实现居中 #

在原有X轴配置的ticks中添加居中对齐属性，同时确保标签通过手动插入换行符\n实现换行（比自动换行更可控），修改后的代码如下：

xAxes: [{
    display: true,
    afterFit: function (scale) { 
        scale.height = 170; // 预留足够高度容纳两行旋转标签
    },
    stacked: true,
    gridLines: {
        display: false,
        borderDash: [2, 6],
        color: "black",
    },
    ticks: {
        fontColor: "#4A4A4A",
        fontFamily: "Montserrat",
        fontSize: 14,
        fontStyle: 600,
        maxRotation: 90,
        minRotation: 90,
        align: 'center', // 强制标签相对刻度线居中
        // 若标签为动态生成，用回调手动拆分换行（示例：按5字符拆分）
        callback: function(value) {
            return value.length > 5 ? value.slice(0,5) + '\n' + value.slice(5) : value;
        }
    }
}],

方案二：自定义渲染标签（更灵活控制） #

如果方案一效果不佳，可通过Chart.js插件自定义标签渲染逻辑，确保旋转后完全居中：

plugins: [{
    afterDraw: function(chart) {
        const ctx = chart.ctx;
        const xAxis = chart.scales['x-axis-0']; // 替换为你的X轴ID
        xAxis.ticks.forEach((tick, index) => {
            const xPos = xAxis.getPixelForTick(index);
            const yPos = chart.height - 20; // 调整标签垂直位置
            ctx.save();
            ctx.translate(xPos, yPos);
            ctx.rotate(-Math.PI / 2); // 顺时针旋转90度
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = '600 14px Montserrat';
            ctx.fillStyle = '#4A4A4A';
            // 按换行符拆分标签并逐行绘制
            const lines = tick.label.split('\n');
            lines.forEach((line, lineIdx) => {
                ctx.fillText(line, 0, lineIdx * 18); // 18为行间距，可按需调整
            });
            ctx.restore();
        });
    }
}]

注意：使用此插件时，需将原X轴配置的ticks.display设为false，避免重复渲染标签。

关键提示 #

• 旋转90度后标签的对齐基准会改变，align: 'center'是让标签相对刻度线的水平中心对齐。
• 手动插入\n换行比自动换行更稳定，能确保两行文本都保持居中状态。
• afterFit中设置的高度需根据字体大小、行数调整，防止标签被截断。

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