如何将Recharts组合图表的Tooltip绑定到Bar而非Line

我使用React和Recharts制作了一个组合图表，包含Line和Bar组件，二者基于不同数据集。目前Tooltip默认仅关联Line组件，需要实现鼠标悬停Bar时显示Tooltip，求可行的解决办法。

原代码 #

<ComposedChart data={resume?.data?.scores} >
    <defs>
      <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor="#ff9300" stopOpacity={0.5} />
        <stop offset="95%" stopColor="#ff9300" stopOpacity={0} />
      </linearGradient>
    </defs>
    <XAxis
      xAxisId={1}
      dataKey="seconds"
      type="number"
      domain={[0, Math.ceil((resume?.data?.total_seconds / 60) + 60)]}
      tickFormatter={(value) => `${Math.ceil(value / 60)}:00`}
    />
    <XAxis
      xAxisId={2}
      dataKey="seconds"
      type="number"
      hide={true}
      domain={[0, Math.ceil(getMaximumSeconds(selectedCategories) / 60)]}
      tickFormatter={(value) => `${Math.ceil(value / 60)}:00`}
    />
    <YAxis domain={[0, 100]} ticks={[0, 25, 50, 75, 100]}
      tickFormatter={(value) => `${value}%`}
    />
    <Legend verticalAlign="top"
      payload={[{ value: "Average Score", type: "line", id: "ID01", color: "#ff9300" }]}
    />
    <CartesianGrid stroke="#f5f5f5" />
    <Line type="monotone" dataKey="percentage" stroke="#ff9300" strokeWidth={3}
      xAxisId={1} dot={false} activeDot={false}  />
    {selectedCategories.length > 0 && (
      <Tooltip content={({ payload }) => {
        return (
          <Button
           size="small"
           >
            {title}
          </Button>
        );
      }} />
    )}
    {selectedCategories.length > 0 && (
      <Bar dataKey="percentage" data={orderedCategories} barSize={1} minPointSize={5} xAxisId={2}>
        {orderedCategories.map((entry: any, index: any) => {
          return <Cell key={`bar-cell-${index}`} />;
        })}
      </Bar>
    )}
    <Area type="monotone" dataKey="percentage" fill="url(#colorUv)" stroke="#ff9300" fillOpacity={0.8} xAxisId={1}
      activeDot={false} />
  </ComposedChart>

解决办法 #

1. 调整组件渲染顺序 #

Recharts中上层组件会优先响应鼠标事件，原代码里Bar在Line和Area之前渲染（DOM层级靠下），导致Tooltip优先捕获Line的事件。把Bar移到Line和Area之后，让Bar处于顶层，确保鼠标事件先被Bar捕获。

2. 限制Line/Area的鼠标事件响应 #

给Line和Area添加pointerEvents="none"属性，禁止它们响应鼠标事件，这样Tooltip只会监听Bar的交互。

3. 优化Tooltip配置 #

给Tooltip添加cursor={{ stroke: 'transparent' }}，隐藏默认的十字光标，避免干扰Bar的事件触发；同时在自定义Tooltip内容时，通过payload里的type字段区分Line和Bar的数据，确保显示正确内容。

4. 关闭Bar的动画（可选） #

如果Bar启用了动画，可能会导致鼠标事件触发不稳定，添加isAnimationActive={false}关闭动画，提升交互准确性。

修改后的完整代码 #

<ComposedChart data={resume?.data?.scores} >
    <defs>
      <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
        <stop offset="5%" stopColor="#ff9300" stopOpacity={0.5} />
        <stop offset="95%" stopColor="#ff9300" stopOpacity={0} />
      </linearGradient>
    </defs>
    <XAxis
      xAxisId={1}
      dataKey="seconds"
      type="number"
      domain={[0, Math.ceil((resume?.data?.total_seconds / 60) + 60)]}
      tickFormatter={(value) => `${Math.ceil(value / 60)}:00`}
    />
    <XAxis
      xAxisId={2}
      dataKey="seconds"
      type="number"
      hide={true}
      domain={[0, Math.ceil(getMaximumSeconds(selectedCategories) / 60)]}
      tickFormatter={(value) => `${Math.ceil(value / 60)}:00`}
    />
    <YAxis domain={[0, 100]} ticks={[0, 25, 50, 75, 100]}
      tickFormatter={(value) => `${value}%`}
    />
    <Legend verticalAlign="top"
      payload={[{ value: "Average Score", type: "line", id: "ID01", color: "#ff9300" }]}
    />
    <CartesianGrid stroke="#f5f5f5" />
    {/* 禁止Line和Area响应鼠标事件 */}
    <Line type="monotone" dataKey="percentage" stroke="#ff9300" strokeWidth={3}
      xAxisId={1} dot={false} activeDot={false} pointerEvents="none" />
    <Area type="monotone" dataKey="percentage" fill="url(#colorUv)" stroke="#ff9300" fillOpacity={0.8} xAxisId={1}
      activeDot={false} pointerEvents="none" />
    {selectedCategories.length > 0 && (
      <Tooltip 
        cursor={{ stroke: 'transparent' }}
        content={({ payload }) => {
          // 提取Bar的对应数据，根据实际结构调整字段名
          const barData = payload?.find(item => item.type === 'bar');
          const title = barData ? barData.payload.title : '无数据';
          return (
            <Button size="small">
              {title}
            </Button>
          );
        }} 
      />
    )}
    {selectedCategories.length > 0 && (
      <Bar 
        dataKey="percentage" 
        data={orderedCategories} 
        barSize={1} 
        minPointSize={5} 
        xAxisId={2}
        isAnimationActive={false}
      >
        {orderedCategories.map((entry: any, index: any) => {
          return <Cell key={`bar-cell-${index}`} />;
        })}
      </Bar>
    )}
  </ComposedChart>

内容的提问来源于stack exchange，提问作者juan pablo velez rojas