react-chartjs-2设置gridLines:false无法隐藏背景网格线如何解决

问题原因 #

你使用的是v3及以上版本的react-chartjs-2，对应底层依赖的Chart.js v3对配置语法做了破坏性更新，你当前写的xAxes/yAxes数组结构、gridLines配置项都是Chart.js v2的旧语法，在新版中不会生效。

修复方案 #

将options配置修改为适配v3版本的语法即可，新版中x、y轴直接作为scales的子属性，网格线配置项改为grid：

const options = {
    scales: {
        y: {
            grid: {
                display: false
            }
            // 如果需要同时隐藏y轴的轴线，可添加以下配置
            // border: {
            //     display: false
            // }
        },
        x: {
            grid: {
                display: false
            }
            // 如果需要同时隐藏x轴的轴线，可添加以下配置
            // border: {
            //     display: false
            // }
        },
    },
};

修改后重新运行即可隐藏所有背景网格线。

内容的提问来源于stack exchange，提问作者Wai Yan Hein