Chart.js 3.7图例溢出显示不一致：仅半数加载时正常换行

这是Chart.js 3.x版本中存在的图例初始化布局计算bug——图表首次渲染时，容器宽度的计算时机可能早于DOM完全就绪，导致图例的换行逻辑判断错误，把最后一项判定为超出容器范围而隐藏。点击图例时会触发图表重绘，此时容器尺寸已经稳定，布局计算正确，所以能正常显示所有项。

解决办法： #

1. 初始化后强制触发重绘

在图表实例化后，手动调用update()方法重新计算布局，确保容器尺寸稳定后再渲染图例：

// 假设你的图表容器是id为myChart的canvas
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, config);

// 延迟100ms触发重绘，确保DOM渲染完成（可根据实际情况调整延迟时间）
setTimeout(() => {
  chart.update();
}, 100);

如果不需要延迟也能生效，可以直接调用chart.update()，不用setTimeout。

2. 升级Chart.js版本

这个布局bug在Chart.js 3.9.1及后续的3.x版本中已经被修复，如果你能升级依赖，直接更新到较新的3.x版本（比如3.9.1），大概率能解决问题。

3. 自定义图例布局（备选方案）

如果上面两种方法都不适用，可以通过自定义图例布局逻辑来强制控制换行：

const config={
    data: data,
    options:{
        plugins:{
            legend:{
                reverse: true,
                title:{
                    text: 'Click the legend to show or hide',
                    display: true,
                    font:{
                        weight: 'bold',
                        size: 14,
                    },
                    padding:{
                        top: 10,
                    },
                },
                labels:{
                    boxHeight: 20,
                    boxWidth: 20,
                    usePointStyle: false,
                    // 强制设置标签最大宽度，辅助布局计算
                    maxWidth: 100
                },
                // 自定义布局函数，确保所有图例项都被渲染
                layout: function(chart) {
                    const legend = chart.legend;
                    // 示例：如果图例项数量是4，前3个一行，最后一个一行
                    if (legend.items.length === 4) {
                        const firstRow = legend.items.slice(0,3);
                        const secondRow = legend.items.slice(3);
                        // 手动设置位置，具体数值根据你的图表调整
                        firstRow.forEach((item, index) => {
                            item.x = legend.left + index * (item.width + legend.labels.padding);
                            item.y = legend.top;
                        });
                        secondRow.forEach((item, index) => {
                            item.x = legend.left + index * (item.width + legend.labels.padding);
                            item.y = legend.top + legend.labels.boxHeight + legend.labels.padding * 2;
                        });
                    }
                }
            },   
        }
    }
}

验证说明 #

你提到问题不受标签字符长度或boxWidth影响，这更印证了是初始化时的布局计算时序问题——因为这些参数都是固定的，只有容器尺寸的计算时机不稳定才会导致随机出现问题。

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