React chartjs-2：X轴无法显示完整时间戳的日期部分问题

首先，Chart.js的时间轴功能依赖时间适配器（比如chartjs-adapter-date-fns或chartjs-adapter-moment），未安装的话会导致时间解析、格式化异常。先安装对应适配器：

若使用date-fns：

npm install chartjs-adapter-date-fns date-fns

若使用moment：

npm install chartjs-adapter-moment moment

接下来修改X轴配置，通过time.displayFormats指定刻度的显示格式，同时设置unit控制刻度粒度，确保日期部分被展示：

const chartConfig = {
  type: 'line' as const,
  data: chartData,
  options: {
    scales: {
      x: {
        type: 'time' as const,
        time: {
          parser: 'YYYY-MM-DDTHH:mm:ss.SSSSSS',
          // 根据数据时间跨度选择刻度单位，比如跨天设为'day'，当天内设为'hour'
          unit: 'hour',
          // 为对应单位设置包含日期的显示格式
          displayFormats: {
            hour: 'YYYY-MM-DD HH:mm',
            day: 'YYYY-MM-DD HH:mm',
          },
          // 调整tooltip的显示格式，展示完整时间信息
          tooltipFormat: 'YYYY-MM-DD HH:mm:ss.SSS',
        },
        title: {
          display: true,
          text: 'Timestamp',
        },
        ticks: {
          maxRotation: 45,
          minRotation: 45,
        },
      },
      // ... y轴配置
    },
  },
};

关键说明： #

• 时间适配器：必须安装，否则Chart.js无法正确解析自定义时间格式，也无法按预期渲染刻度文本。
• displayFormats：针对不同unit设置包含日期的格式，确保X轴刻度同时展示日期和时间。
• unit：根据数据的时间跨度选择合适单位，Chart.js会自动适配刻度密度。
• ticks旋转：避免长文本的刻度重叠，提升可读性。

另外，确保chartData中的X轴数据是符合parser格式的字符串，或已转换为Date对象（转换后可省略parser配置）。

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