在 Chart.js 4 中，可通过 scales.{x/y}.display: false 彻底隐藏坐标轴线，同时保留网格线；若需保留刻度标签或调整颜色，则需分别配置 grid、ticks 和 border 子选项。

在 chart.js 4 中，可通过 `scales.{x/y}.display: false` 彻底隐藏坐标轴线，同时保留网格线；若需保留刻度标签或调整颜色，则需分别配置 `grid`、`ticks` 和 `border` 子选项。

在使用 Chart.js 4 绘制折线图时，常需移除默认的 X/Y 坐标轴线（即两条粗边框），但又希望保留网格线以增强数据可读性——这正是许多设计师和开发者的核心需求。关键在于：display: false 作用于整个坐标轴（含轴线、刻度、标签），而轴线样式控制需通过 border 和 grid 独立配置。

✅ 正确做法：完全隐藏坐标轴线（推荐）

只需将 scales.x.display 和 scales.y.display 设为 false，即可移除所有轴线、刻度及标签，但默认网格线仍会显示（因 grid.display 默认为 true）：

options: {
  scales: {
    x: {
      display: false // 隐藏整个 X 轴（含轴线、刻度、标签）
    },
    y: {
      display: false // 隐藏整个 Y 轴
    }
  }
}

⚠️ 注意：border.display: false 或 drawBorder: false 在 Chart.js 4 中已弃用，直接使用 display: false 即可。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

? 进阶定制：保留网格/刻度，仅隐藏轴线

若需保留网格线和刻度标签，仅隐藏坐标轴线本身（即底部和左侧的粗边框），应显式关闭 border 并精细控制 grid 和 ticks：

scales: {
  x: {
    border: { display: false }, // 关键：隐藏 X 轴线（不隐藏网格！）
    grid: {
      display: true,        // 确保网格可见
      color: 'rgba(232, 221, 217, 0.6)', // 自定义网格颜色
      lineWidth: 1.5
    },
    ticks: {
      color: '#666',        // 刻度文字颜色
      font: { size: 12 }
    }
  },
  y: {
    border: { display: false }, // 隐藏 Y 轴线
    grid: {
      color: 'rgba(232, 221, 217, 0.6)',
      lineWidth: 1.5,
      drawTicks: false     // 隐藏刻度短线（"-" 符号）
    },
    ticks: {
      color: '#666',
      padding: 10
    }
  }
}

? 常见误区与修复

• ❌ 错误写法：x.border.didplay: false（拼写错误，且 didplay 无效）
• ❌ 错误写法：y.drawBorder: false（Chart.js 4 已移除该属性）
• ✅ 正确路径：所有轴线控制统一通过 border.display（布尔值）实现
• ✅ 网格透明化：使用 rgba(r,g,b,a) 格式，如 'rgba(0,0,0,0)' 实现完全透明

? 完整示例（适配你的原始代码）

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,
      pointRadius: 3
    }]
  },
  options: {
    scales: {
      x: {
        display: false, // ✅ 移除 X 轴线及标签
        grid: {
          display: true,
          color: 'rgba(232, 221, 217, 0.6)',
          lineWidth: 1.2
        }
      },
      y: {
        display: false, // ✅ 移除 Y 轴线及标签
        beginAtZero: true,
        grid: {
          display: true,
          color: 'rgba(232, 221, 217, 0.6)',
          lineWidth: 1.2,
          drawTicks: false
        },
        ticks: {
          display: true, // 若需显示数值标签，设为 true；否则 false
          color: 'transparent' // 或设为 '#999' 以保持可读性
        }
      }
    },
    plugins: {
      legend: { display: false },
      tooltip: { enabled: false }
    },
    responsive: true,
    maintainAspectRatio: false
  }
});

通过以上配置，你将获得如预期所示的「无轴线、有网格」清爽图表效果——既满足视觉简洁性，又不失数据引导功能。