React中使用Chart.js如何实现标签同侧对齐及上下排列

解决方案 #

你当前使用的是横向条形图（indexAxis: 'y'），标签对齐异常主要是配置混用了旧版本属性、对齐参数设置错误导致的，按如下方式修改options配置即可实现所有y轴标签统一左对齐、上下依次排列的效果：

1. 移除Chart.js v2版本的废弃配置gridLines，相关属性已经整合到grid配置项中
2. 调整y轴刻度的对齐参数，增加固定留白避免标签被截断
   修改后的完整配置如下：

const options = {
    indexAxis: "y",
    maintainAspectRatio: false,
    aspectRatio: 0.8,
    barThickness: 20,
    responsive: true,
    layout: {
        padding: {
            left: 50 // 调大左侧padding给标签留出显示空间，可根据标签长度自行调整
        }
    },
    plugins: {
        legend: {
            display: false
        }
    },
    scales: {
        x: {
            ticks: {
                color: "#495057"
            },
            grid: {
                color: "#ebedef"
            }
        },
        y: {
            ticks: {
                color: "#495057",
                align: 'start', // 所有标签统一向左侧对齐
                textAlign: 'left', // 标签文本内部左对齐，避免长标签换行后错位
                padding: 10 // 标签和条形图之间的间距
            },
            grid: {
                color: "#ebedef",
                offsetGridLines: true // 原gridLines配置移到此处生效
            }
        }
    }
};

后续如果需要增加多个y轴标签，直接在data.labels数组里按顺序添加即可，标签会自动上下依次排列、保持统一对齐效果。

内容的提问来源于stack exchange，提问作者charan p.v