如何使用React Recharts库显示图表数据点的X、Y坐标值？

要实现鼠标悬停时同时展示X、Y坐标值，有两种简洁的方案：

方法一：自定义Tooltip内容 #

通过Tooltip的content属性完全控制展示内容，灵活定制显示字段和样式：

替换原代码中的<Tooltip />为：

<Tooltip
  content={({ active, payload }) => {
    if (active && payload && payload.length) {
      const { x, y } = payload[0].payload;
      return (
        <div style={{ backgroundColor: '#fff', padding: '8px', border: '1px solid #ddd', borderRadius: '4px' }}>
          <p>X: {x}</p>
          <p>Y: {y}</p>
        </div>
      );
    }
    return null;
  }}
/>

方法二：利用默认Tooltip的label配置 #

如果想保留Recharts默认的Tooltip样式，只需指定labelKey关联X轴字段，即可自动显示X值：

替换原代码中的<Tooltip />为：

<Tooltip labelKey="x" />

此时默认Tooltip会将x字段作为标题展示，同时保留Y值的显示，实现X、Y坐标同时呈现。

注意事项 #

确保你的chartData数据结构为包含x和y字段的对象数组，例如：

const chartData = [
  { x: 1, y: 6 },
  { x: 2, y: 12 },
  { x: 3, y: 8 },
  // 更多数据...
];

修改后的完整代码示例 #

import { LineChart, XAxis, YAxis, CartesianGrid, Line, Tooltip, ReferenceLine } from 'recharts';

const Chart = ({ chartData }) => {
  return (
    <>
      <LineChart
        width={1000}
        height={500}
        data={chartData}
        margin={{
          top: 10,
          right: 30,
          left: 30,
          bottom: 10,
        }}
      >
        <CartesianGrid strokeDasharray='3 3' />
        <XAxis dataKey='x' domain={['auto', 'auto']} />
        <ReferenceLine x={0} stroke='black' />
        <YAxis dataKey='y' domain={['auto', 'auto']} />
        <ReferenceLine y={0} stroke='black' />
        <Line type='monotone' dataKey='y' stroke='#ccc' />
        {/* 这里使用方法二的配置，也可替换为方法一的自定义内容 */}
        <Tooltip labelKey="x" />
      </LineChart>
    </>
  );
};

export default Chart;

内容的提问来源于stack exchange，提问作者Priyanshi Babbar