如何在Chart.js中修改图表的字体颜色？

全局默认字体颜色 #

如果想统一设置所有文本（坐标轴标签、图例等）的默认颜色，必须在创建Chart实例之前设置Chart.defaults.color，放在实例创建后不会生效。

标题字体颜色 #

Chart.js v3及以上版本中，标题配置需要放在options.plugins.title下，使用color属性设置字体颜色（旧版的fontColor已废弃）。

坐标轴标签颜色 #

要修改x轴或y轴的刻度标签颜色，需要在对应轴的ticks配置中设置color属性。

图例与数据集标签颜色 #

修改图例文本颜色，可在options.plugins.legend.labels.color中设置；单独调整某个数据集的标签颜色，可在该数据集的配置里添加labelColor属性。

修正后的完整代码 #

const ctx = document.getElementById('chart');

// 全局默认字体颜色（放在创建实例前）
Chart.defaults.color = '#faebd7';

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['JS', 'Html', 'Css', 'Node.js', 'Java'],
        datasets: [{
            label: 'How much I master each language',
            data: [60, 70, 40, 10, 30],
            borderWidth: 1,
            backgroundColor: '#09dbbf',
            // 单独设置该数据集的标签颜色（可选）
            labelColor: '#faebd7'
        }]
    },
    options: {
        plugins: {
            title: {
                display: true,
                fontSize: 30,
                text: "How much I master each language",
                color: '#faebd7' // 标题字体颜色
            },
            legend: {
                labels: {
                    color: '#faebd7' // 图例文本颜色
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    color: '#faebd7' // y轴刻度标签颜色
                }
            },
            x: {
                ticks: {
                    color: '#faebd7' // x轴刻度标签颜色
                }
            }
        }
    }
});

内容的提问来源于stack exchange，提问作者LG .i1