ChartJS 3.x 如何将tick刻度标签放置在图表区域内部？

安全阿岳

2026-10-2

ChartJS 3.x 刻度标签放置在图表内部的实现方案

ChartJS 3.x完全支持将刻度标签放在图表区域内部，你之前只设置负padding没有生效，是因为缺少了核心的mirror参数配置，完整可行的配置如下：

关键配置说明

需要在对应坐标轴的ticks配置项中同时设置以下参数：

mirror: true：该参数会将刻度标签翻转到轴线的另一侧，也就是朝向图表区域内部，是实现该需求的核心配置
padding: 负值：用于调整标签往图表内部偏移的距离，具体数值可以根据标签字体大小、长度自行适配
align：配合标签位置调整对齐方式，避免文字被截断，比如底部X轴可设为end，左侧Y轴可设为right
z: 10：调高刻度标签的层级，避免被图表的系列图形遮挡

完整配置示例

const chartOptions = {
  // 可选：全局布局调整，避免外侧标签被截断
  layout: {
    padding: {
      left: 10,
      bottom: 10,
      right: 10
    }
  },
  scales: {
    // 底部X轴配置
    x: {
      grid: {
        drawBorder: false, // 可选：隐藏坐标轴外边框，视觉更统一
      },
      ticks: {
        mirror: true,
        padding: -18,
        align: 'end',
        z: 10
      }
    },
    // 左侧Y轴配置
    y: {
      grid: {
        drawBorder: false,
      },
      ticks: {
        mirror: true,
        padding: -25,
        align: 'right',
        z: 10
      }
    }
  }
}