Angular使用PrimeNG Chart.js时修改X/Y轴标签字体颜色问题

问题原因 #

你使用的是Chart.js v2版本的配置语法，当前PrimeNG主流版本绑定的是Chart.js v3/v4版本，配置结构存在破坏性更新，因此原有配置不生效。

修正后的配置 #

直接替换你代码中的lineOptions配置即可：

this.lineOptions = {
  plugins: {
    legend: {
      labels: {
        color: '#fff' // 图例文字颜色
      }
    }
  },
  scales: {
    x: { // v3+版本替换原有的xAxes数组写法
      ticks: {
        color: 'white' // 替换原fontColor属性
      }
    },
    y: { // v3+版本替换原有的yAxes数组写法
      ticks: {
        color: 'white',
        beginAtZero: true
      }
    }
  }
};

异常排查 #

如果配置更新后仍不生效，可在全局样式文件styles.css中补充以下代码，规避Angular样式隔离、深色模式自动适配导致的样式覆盖问题：

.p-chart canvas {
  color-scheme: only light;
}

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