Chart.js 3.9.1：如何将X轴刻度标记移至X轴上方

可以实现该需求，Chart.js v3.9.1提供了对应的配置项，主要通过X轴的ticks配置来调整刻度标记（标签）的位置：

常用配置项说明 #

• ticks.align：控制标签相对于刻度线的对齐方式，可选值：
  • 'center'（默认）：标签对齐到刻度线中间
  • 'start'：标签对齐到刻度线左侧
  • 'end'：标签对齐到刻度线右侧
• ticks.textOffset：设置标签的水平偏移量（单位：像素），正数向右偏移，负数向左偏移
• ticks.padding：设置标签与刻度线之间的垂直间距（单位：像素）

修改后的代码示例 #

将以下配置添加到你的X轴ticks选项中：

scales: {
    x: {
        bounds: 'ticks',
        type: 'time',
        time: {
            parser: 'yyyyMMddHHmmss',
            unit: 'minute',
            stepSize: 5,
            displayFormats: {
                minute: 'HH:mm',
                second: 'mm:ss'
            }
        },
        title: {
            display: false,
            text: 'Timestamp'
        },
        grid: {
            drawOnChartArea: false,
            lineWidth: 1
        },
        ticks: {
            display: true,
            color: '#cecece',
            align: 'start', // 标签对齐到刻度线左侧
            textOffset: 8 // 向右偏移8像素，可根据需求调整
        }
    },
    // Y轴配置保持不变
    y: {
        type: 'linear',
        display: true,
        ticks: {
            padding: 10,
            autoSkip: true,
            maxTicksLimit:2,
            color: '#cecece'
        },
        title: {
            display: false,
            text: 'Count',
            align: 'end'
        },
        grid: {
            drawOnChartArea: false
        },
    }
}

进阶：自定义刻度线位置 #

如果需要调整刻度线本身的位置（而非仅标签），可以使用afterBuildTicks回调来修改刻度的时间值，示例如下：

scales: {
    x: {
        // 其他配置不变
        afterBuildTicks: function(chart) {
            // 将每个刻度时间向后偏移2分钟
            chart.ticks.forEach(tick => {
                tick.value.setMinutes(tick.value.getMinutes() + 2);
            });
            return chart.ticks;
        }
    }
}

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