Chart.js 4中移除图表轴线或修改轴线颜色问题求助

先看你代码里的问题：x轴的border配置里把display拼成了didplay，这就是x轴线没隐藏的核心原因。

彻底移除两条轴线的修正代码 #

把拼写错误修正后，确保x、y轴的border.display都设为false，就能完全隐藏轴线：

const MAINCHARTCANVAS = document.querySelector(".main-chart")

new Chart(MAINCHARTCANVAS, {
    type: 'line',
    data: {
        labels: ["Mon" , "Tue" , "Wed" , "Thu" , "Fri" , "Sat" , "Sun"],
        datasets: [{
            label: 'My First Dataset',
            data: [7,5,7,7,8,7,4],
            borderColor: "#4F3422",
            tension: 0.4,
            borderWidth:7,
            borderSkipped: true,
        }]
    },
    options: {
        scales: {
            x:{
                grid:{
                    display:false,  
                },
                border:{
                    display: false, // 修正拼写错误
                }
            },
            y:{
                beginAtZero: true,
                grid:{
                    lineWidth:3,
                    color:"#E8ddd9",
                },
                border: {
                    display:false, // 保持该配置隐藏y轴线
                },
                ticks: {display: false}
            }
        },
        plugins: {
            legend: false,
            tooltip:{
                enabled: false
            }
        },
        responsive: true,
        maintainAspectRatio: false,
        elements: {
            point:{
                radius: 3
            }
        }
    }
})

如果只是想修改轴线颜色（不移除） #

把对应轴的border.display设为true，再添加border.color配置即可，示例如下：

x:{
    grid:{
        display:false,  
    },
    border:{
        display: true,
        color: "#your-target-color" // 替换为你需要的颜色值
    }
},
y:{
    // 保留其他原有配置
    border: {
        display: true,
        color: "#your-target-color"
    }
}

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