如何修改Chart.js图表的网格线颜色？现有配置不生效是什么原因？

错误原因 #

你将options配置项错误嵌套在了data对象内部，Chart.js要求options是和type、data平级的顶级配置属性，嵌套在data内的配置不会被识别，因此网格线样式不生效。

修正后代码 #

const options = {
        scales: {
            x: {
            grid: {
                color: 'rgba(255,0,0,0.1)',
                borderColor: 'red'
            }
            },
            y: {
            grid: {
                color: 'rgba(0,255,0,0.1)',
                borderColor: 'green'
            }
            }
        }
        };


var chart0 = new Chart(document.getElementById("chart0"), {
   type: 'bar',
   data: {
       labels: [some,lables,here],
       datasets: [
       { 
       data: dataarr0,
       fill: true,
       backgroundColor: 'rgb(255, 99, 132)'
       }
       ]
   },
   // options移至data外部，与type、data平级
   options: options
   });

可选校验项 #

如果修正位置后仍未生效，可排查两点：

• 确认使用Chart.js 3.x及以上版本，2.x版本的网格线配置字段为gridLines而非grid
• 确认无后续代码或全局配置覆盖了当前的scales配置

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