react-chart-2双X轴折线图问题：第二条线未匹配对应X轴标签

问题根源 #

1. 全局labels设置为colors数组，导致第二个数据集默认绑定底部X轴标签，即便指定了xAxisId: 'x1'也无法正确映射顶部X轴。
2. 第二个数据集的sharpeData长度（2）与底部X轴标签数（5）不一致，Chart.js会自动将数据填充到前两个位置，造成折线跟随底部X轴。
3. 未明确指定X轴的type: 'category'，轴的分类解析逻辑异常。

解决方案 #

1. 移除全局labels配置：两个X轴有独立分类标签，无需全局统一labels。
2. 为X轴明确设置分类类型：每个X轴添加type: 'category'，确保Chart.js识别为分类轴并使用配置的标签。
3. 用对象格式定义第二个数据集的data：每个数据点明确指定对应X轴的标签和Y值，让Chart.js精准匹配顶部X轴位置。

修改后的完整配置 #

Scales配置

scales: {
  x: {
    type: 'category',
    grid: {
      drawOnChartArea: false,
    },
    position: 'bottom',
    labels: ['red', 'yellow', 'blue', 'green', 'pink']
  },
  x1: {
    type: 'category',
    grid: {
      drawOnChartArea: true,
    },
    position: 'top',
    labels: ['circle', 'square']
  },
  y: {
    beginAtZero: true,
    ticks: {
      maxTicksLimit: 5,
      stepSize: 5,
    },
  },
}

数据配置

{
  datasets: [
    {
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
      borderColor: 'rgba(13, 202, 240, 1)',
      pointHoverBackgroundColor: '#fff',
      borderWidth: 1,
      data: [10, 5, 8, 9, 7],
      xAxisId: 'x'
    },
    {
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
      borderColor: 'rgba(202, 13, 240, 1)',
      pointHoverBackgroundColor: '#fff',
      borderWidth: 1,
      data: [
        { x: 'circle', y: 17 },
        { x: 'square', y: 2 }
      ],
      xAxisId: 'x1',
    }
  ]
}

说明 #

使用对象格式的data时，Chart.js会自动根据x值匹配对应xAxisId的标签位置，无需手动填充空值，第二条折线的点将精准对应顶部X轴的circle和square标签。

内容的提问来源于stack exchange，提问作者Michel Gisenaël