React中Chart.js折线图填充背景遮挡Y轴边框，求显示边框方法

方案1：调整轴的绘制层级（最简单有效） #

直接在Y轴配置中添加z属性，提高它的绘制层级，让轴边框在填充区域之后绘制（显示在上方）：

修改options里的Y轴配置：

y: {
  grid: {
    display: false,
    drawBorder: true,
    drawOnChartArea: false,
  },
  ticks: {
    display: true,
  },
  z: 2 // 新增：提升Y轴绘制层级，确保在填充层之上
}

同时可以给数据集设置更低的层级，确保顺序正确：

datasets: [
  {
    data: chartData.data,
    backgroundColor: chartFillColour,
    borderColor: chartColour,
    pointRadius: 0,
    fill: true,
    z: 1 // 新增：让数据集层级低于Y轴
  }
]

方案2：通过插件钩子手动重绘边框 #

如果方案1不生效，可用Chart.js的afterDraw钩子在图表绘制完成后，手动重新绘制Y轴边框：

修改options配置，添加插件逻辑：

const options = {
  plugins: {
    legend: {
      display: false,
    },
    // 新增afterDraw钩子，手动绘制Y轴边框
    afterDraw: (chart) => {
      const ctx = chart.ctx;
      const yAxis = chart.scales.y;
      
      ctx.save();
      // 自定义边框样式，可根据需求调整颜色和宽度
      ctx.strokeStyle = '#ccc';
      ctx.lineWidth = 1;
      // 绘制Y轴右侧边框，从顶部刻度到底部刻度
      ctx.beginPath();
      ctx.moveTo(yAxis.right, yAxis.top);
      ctx.lineTo(yAxis.right, yAxis.bottom);
      ctx.stroke();
      ctx.restore();
    }
  },
  // 原有的scales配置...
}

问题原因说明 #

Chart.js默认绘制顺序是先渲染数据集（包括填充背景），再绘制轴元素。当填充区域从第一个数据点延伸到Y轴时，就会遮挡住Y轴边框。通过调整层级或手动重绘，就能改变绘制顺序，让边框显示在填充区域上方。

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