Recharts堆叠区域显示错误的yAxis标签？

Question

http:/recharts.orgen-USexamplesStackedAreaChart。

这个例子显示，我也做了指针，值的值与标签不对应，为什么会发生这种情况？

Answer 1

你可以自定义工具提示，使用它的 content 榰.

传递给该组件的道具与Rechart的 Tooltip 所以你只需要覆盖需要的部分，而绕过其他部分。如果你不想改变工具提示的视觉部分，你可以返回另一个 Tooltip 在最后。

// Do not pass the `content` since it causes a recursive rendering
const CumulativeTooltip = ({ content, payload, ...props }) => {
  const values = payload.map(({ value }) => value);
  const cumulativePayload = payload.reduce((result, item, index) => result.concat({
    ...item,
    value: values.slice(0, index + 1).reduce((sum, v) => sum + v, 0)
  }), []);

  return (<Tooltip {...props} payload={cumulativePayload} />);
}

// ... later in chart

<Tooltip content={<CumulativeTooltip/>}/>

游乐场