Chart.js 如何仅移除图例色块标签、保留文字并居中显示

• 不要修改数据集的backgroundColor和borderColor属性，该方案会额外影响图表折线本身的渲染样式，也是导致图例文字无法居中的核心原因
• 正确方案通过配置图例标签的色块宽度实现隐藏，无需修改数据集样式
• 搭配对齐属性即可实现文字居中效果

完整配置示例 #

const config = {
    type: 'line',
    data: {
        datasets: [{
            label: 'My Chart',
            // 保留折线本身需要的样式属性，无需设为透明
            backgroundColor: '#2196F3',
            borderColor: '#2196F3',
            data: numbers,
        }]
    },
    options: {
        plugins: {
            legend: {
                display: true, // 保留图例整体渲染
                align: 'center', // 图例整体水平居中
                position: 'top', // 可根据需求调整位置，可选值：top/bottom/left/right
                labels: {
                    boxWidth: 0, // 核心配置：将色块宽度设为0，直接隐藏色块
                    padding: 0, // 取消色块原本的预留边距，避免文字偏移
                    textAlign: 'center' // 强制图例文字本身居中对齐
                }
            }
        }
    }
};
new Chart(document.getElementById('my-chart'), config);

如果需要更复杂的自定义图例效果，可额外配置plugins.legend.labels.generateLabels方法，完全自定义图例项的渲染规则，按需返回不带色块的配置即可。

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