React Chartjs 2 如何将X轴标签调整至轴线正上方

不需要自定义afterDraw钩子做手动绘制，直接使用Chart.js原生刻度配置即可实现标签显示在X轴线上方的效果，所有位置计算由框架内置逻辑完成，天然适配响应式、动态时间窗口切换场景，不会出现错位问题。

核心修改点是在X轴配置下补充ticks字段的两个属性：

• mirror: true：核心配置，作用是将刻度标签从轴线外侧（默认X轴下方的画布外区域）翻转渲染到轴线内侧（即X轴线上方、图表绘图区一侧）
• padding: 数值：调整标签和X轴线的垂直间距，避免文字和轴线重叠，可根据标签字号调整，一般取6-10即可匹配常规设计效果

修改后的完整核心代码 #

Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Filler)

const options = {
  layout: { padding: { top: 50 } },
  responsive: true,
  elements: {
    line: {
      tension: 0.4, // 折线平滑度
    },
    point: {
      radius: 0,
    },
  },
  scales: {
    x: {
      grid: {
        display: false,
        drawBorder: false,
      },
      // 新增ticks配置实现标签上移
      ticks: {
        mirror: true,
        padding: 8,
        // 可按需自定义标签样式，例如：
        // color: '#64748b',
        // font: { size: 12, weight: 500 }
      }
    },
    y: {
      beginAtZero: true,
      grid: {
        display: false,
        drawBorder: false,
      },
      ticks: {
        display: false,
      },
    },
  },
}

const chartData = {
  labels: ['JAN', 'FEB', 'MAR', ...],
  datasets: [
    {
      data: [12, 79, 56, ...],
      borderWidth: 5,
    },
  ],
}

export const Graph = () => {
  return (
    <div>
      ....
      <Line plugins={plugins} options={options} data={chartData} />
    </div>
  )
}

注意事项 #

• 该配置兼容Chart.js 3.x/4.x、react-chartjs-2 4.x/5.x版本，和现有代码的组件注册写法完全匹配，无需额外升级依赖
• 所有标签位置计算由Chart.js内置渲染逻辑接管，容器缩放、时间维度切换、数据动态更新时都会自动重算坐标，不需要额外写监听逻辑
• 默认标签为居中对齐，和示例效果一致，如果需要调整水平位置，可在ticks中添加align: 'start'/'center'/'end'配置

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