Recharts散点图同坐标数据未重叠，横向堆叠问题求助

问题核心 #

相同日期（如8月3日）和Y轴计数的数据点没有重合在同一坐标，反而横向分散，本质是X轴未正确识别为时间轴，且日期数据格式不符合Recharts的时间处理要求。

解决步骤 #

• 设置X轴为时间类型
  在XAxis组件中添加type="number"（或type="time"），让同日期的点映射到同一X坐标：

  <XAxis
    dataKey="receipt_date"
    type="number"
    tickFormatter={(timestamp) => dateFormatter(new Date(timestamp))}
  />
  

• 统一日期数据格式
  把原始日期转换成毫秒时间戳，确保Recharts能正确解析：

  // 处理数据：将receipt_date转为时间戳
  const processedData = seqData.map(item => ({
    ...item,
    receipt_date: new Date(item.receipt_date).getTime()
  }));
  

  之后将processedData传给ScatterChart的data属性。

• 清理Scatter组件冗余配置
  去掉Scatter组件的type="monotone"，这个属性是折线图专用，对散点图无效还可能干扰定位：

  <Scatter
    dataKey="yCounter"
    fillOpacity="0.6"
  />
  

修改后的完整代码示例 #

<ResponsiveContainer width="100%" height="100%">
  <ScatterChart
    data={processedData} // 传入处理后的时间戳数据
    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis
      dataKey="receipt_date"
      type="number"
      tickFormatter={(timestamp) => dateFormatter(new Date(timestamp))}
    />
    <YAxis />
    <Tooltip />
    <Legend />
    <Scatter dataKey="yCounter" fillOpacity="0.6" />
  </ScatterChart>
</ResponsiveContainer>

内容的提问来源于stack exchange，提问作者Harsh Jhunjhunwala