Chart.js 4.x版本中如何设置虚线网格线？

你代码里的borderDash不生效，是因为搞混了坐标轴边框和网格线的配置项——grid下的borderDash在部分版本里是控制坐标轴边框的，不是网格线。下面分版本给你正确写法：

用Chart.js v3+的情况 #

如果要让y轴对应的横向网格线变成虚线，直接在grid里加borderDash即可，要是之前没生效，检查下是否开启了drawOnChartArea（默认是开启的，但保险起见可以显式加上）：

scales: {
  y: {
    grid: {
      drawTicks: false,
      borderDash: [5, 5], // 控制网格线的虚线样式
      display: true,
      drawOnChartArea: true // 确保网格线绘制在图表区域内
    }
  }
}

要是你实际想设置的是y轴左侧的竖边框为虚线，那得单独配置border：

scales: {
  y: {
    border: {
      borderDash: [5, 5] // 坐标轴边框的虚线
    },
    grid: {
      drawTicks: false,
      display: true
    }
  }
}

用Chart.js v2的情况 #

v2版本的配置结构不同，网格线的相关设置要放在gridLines节点下：

scales: {
  yAxes: [{
    gridLines: {
      drawTicks: false,
      borderDash: [5, 5],
      display: true
    }
  }]
}

另外提醒：如果官方文档里找不到borderDash的相关说明，大概率是你查看的文档版本和实际使用的库版本不匹配，先确认自己用的Chart.js版本再对应查阅文档。

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