react-chartjs-2无法修改标签默认颜色与字体大小问题求助

问题原因 #

你当前使用的是适配Chart.js v3+版本的react-chartjs-2，你的配置语法是Chart.js v2的旧规范，所以样式设置无法生效。

具体修改点 #

• 移除scales下的xAxes/yAxes数组结构，直接用x、y属性定义对应坐标轴配置
• 刻度样式属性更名：fontColor改为color，fontSize改为font.size
• 图例配置需要放到plugins节点下，属性同步更新为v3规范

修改后的完整代码 #

import React from 'react'
import './model.css'
import {Bar} from 'react-chartjs-2'

function Model() {
    const data = {
        labels: ['red', 'blue', 'white', 'green'],
        datasets: [
          {
            label: '# of days',
            data: [6, 7, 2, 14],
            backgroundColor: [
              'rgba(255, 99, 132, 0.4)',
              'rgba(54, 162, 235, 0.4)',
              'rgba(255, 206, 86, 0.4)',
              'rgba(75, 192, 192, 0.4)',
              
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              
            ],
            borderWidth: 1,
          },
        ],
      };
     const options= { 
        plugins: {
            legend: {
                labels: {
                    color: "blue",
                    font: {
                        size: 18
                    }
                }
            }
        },
        scales: {
            y: {
                ticks: {
                    color: "white",
                    font: {
                        size: 18
                    },
                    stepSize: 1,
                    beginAtZero: true
                },
                // 若需要设置Y轴标题可取消注释以下配置
                // title: {
                //     display: true,
                //     text: "天数",
                //     color: "white",
                //     font: {
                //         size: 16
                //     }
                // }
            },
            x: {
                ticks: {
                    color: "white",
                    font: {
                        size: 14
                    }
                },
                // 若需要设置X轴标题可取消注释以下配置
                // title: {
                //     display: true,
                //     text: "颜色类型",
                //     color: "white",
                //     font: {
                //         size: 16
                //     }
                // }
            }
        }
    }
     

    return (
        <div className="model-container">
            <Bar
                data={data}
                options={options}   
            />
        </div>
    )
}

export default Model

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