Recharts如何自定义Tooltip组件内元素的显示顺序

itemSorter返回固定值1/-1不生效，是因为没有正确使用该属性的排序逻辑：该回调需要返回可比较的排序权重值，直接返回固定常数会让所有条目权重一致，最终 fallback 到默认渲染顺序，自然达不到调整效果。

问题背景 #

在NextJS项目中基于Recharts搭建同时包含Line折线、Stacked Bars堆叠柱状图的ComposedChart组合图表，堆叠柱状图默认从下往上渲染，Tooltip提示框条目默认按组件渲染顺序升序排列，和视觉上柱从上到下的顺序不匹配。

预期Tooltip条目从上到下顺序为：黄色折线 -> 灰色柱 -> 青色柱 -> 浅青色柱。

对应数据结构 #

单根堆叠柱对应的数据对象结构如下：

[
 {
  aggregated_month: "2021/08",
  deep_sleep_uu: 192, // 对应灰色柱
  latest_recovery_uu: 159, // 对应青色柱
  recovery_rate: 63.6, // 对应黄色折线
  recovery_uu: 176, // 对应浅青色柱
  total_uu: 527 // 柱顶显示数值
 },
 {
  aggregated_month: "2022/04",
  latest_recovery_uu: 288, // 对应青色柱
  recovery_rate: 76.1, // 对应黄色折线
  recovery_uu: 127, // 对应浅青色柱
  sleep_uu: 130, // 对应红色柱
  total_uu: 545 // 柱顶显示数值
 }
]

已验证无效方案 #

• 配置<Tooltip itemSorter={() => -1} />：为组件默认效果，顺序无变化
• 配置<Tooltip itemSorter={() => 1} />：无法触发自定义排序，顺序无变化

可行解决方案 #

方案1：自定义排序权重映射（推荐，不改动现有图表渲染逻辑） #

itemSorter回调会接收每个Tooltip条目的配置对象，其中dataKey字段对应系列绑定的字段名，只要给每个系列指定排序权重，权重值越小，在Tooltip中越靠上，代码如下：

<Tooltip
  itemSorter={(item) => {
    // 按期望的Tooltip从上到下顺序配置权重，新增系列直接补充键值对即可
    const sortWeight = {
      recovery_rate: 0, // 黄色折线排第一
      deep_sleep_uu: 1, // 灰色柱排第二
      latest_recovery_uu: 2, // 青色柱排第三
      recovery_uu: 3, // 浅青色柱排第四
      sleep_uu: 4 // 红色柱排最后
    }
    return sortWeight[item.dataKey]
  }}
/>

方案2：调整组件声明顺序（无需额外写排序逻辑） #

Recharts堆叠柱状图的渲染层级和组件书写顺序一致：先写的<Bar />组件会渲染在堆叠的最底层，后写的渲染在上层，Tooltip默认顺序和组件书写顺序一致。
你只需要把原本从下到上声明的Bar组件，改成从上到下的顺序声明，保留相同的stackId配置，堆叠渲染效果不会发生任何变化，Tooltip默认顺序就会自动匹配柱状图从上到下的视觉顺序，最后再声明折线组件即可。

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