Chart.js 4折线图：移除XY轴线条或修改轴颜色（保留网格）

你代码里有两处细节问题导致没实现预期效果，修正后就能移除轴线同时保留网格：

1. 拼写错误：X轴的border.didplay应该是border.display，少打了一个s，这会导致X轴轴线的隐藏配置不生效
2. 冗余配置：Y轴的drawBorder是Chart.js旧版的配置项，3.x+版本已经统一改用border.display，这个配置可以直接删掉
3. 网格显示控制：如果你需要保留X轴网格，得把X轴的grid.display改成true（你当前设为false是隐藏了X轴网格）

修正后的完整代码：

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: true, // 开启X轴网格显示
        },
        border:{
          display: false, // 隐藏X轴轴线
        }
      },
      y:{
        beginAtZero: true,
        grid:{
          lineWidth:3,
          color:"#E8ddd9",
        },
        border: {
          display: false, // 隐藏Y轴轴线
          dash: [10,16],
        },
        ticks: {display: false}
      }
    },
    plugins: {
      legend: false,
      tooltip:{
        enabled: false
      },
      backgroundCircle: false
    },
    responsive: true,
    maintainAspectRatio: false,
    elements: {
      point:{
        radius: 3
      }
    }
  }
})

核心逻辑就是通过border.display: false单独隐藏轴的边框线，同时用grid.display: true保留网格线的显示，完全匹配你要的效果。

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