[bug] incorrect payload for tooltip

[philiparvidsson]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Hover to the right side of the black and red dots
2. Look at the tooltip

What is expected?

The tooltip says:

Failed: 954
Incubating: 6526.333333333333

What is actually happening?

The tooltip says:

Failed: 6526.333333333333
Incubating: 6526.333333333333

Environment	Info
Recharts	v2.1.6
React	18.1.0
System	Linux 5.18.5-arch1-1 #1 SMP PREEMPT_DYNAMIC Thu, 16 Jun 2022 20:40:45 0000 x86_64 GNU/Linux
Browser	Firefox 101.0.1 (64-bit)

---

6526.333333333333 does not exist in the "Failed" dataset, so it should not be possible for Recharts to specify it in the payload for it. Hoveringon the left side works as expected.

[Hvitgar]

struggled with the same problem. I assume you are using multiple datasets/series that you are plotting in the same graph? Try this:

...
<XAxis 
...
allowDuplicatedCategory={false}
...
/>

For reference: codesandbox

[adfaure]

Idk why, idk how but works for me.
This behavior is documented somewhere ? I don't really understand what is happening here.

[ckifer]

The original codesandbox is no longer linking to the correct code but using the second example works.

The axis type is number so allowDuplicatedCategory shouldn't effect anything imo. Labeled as a bug

[Forfold]

I'm also seeing this issue. I have my XAxis set to type='category' with allowDuplicatedCategory={false}

As you can see, one of the items should be Nathaniel Cook: 2, but both are showing as AdminMcAdminFace: 1.

Here is my data:

"timeSeries": [
                    {
                        "start": "2023-09-13T18:00:00Z",
                        "end": "2023-09-14T02:00:00Z",
                        "count": 0,
                        "segmentLabel": "Admin McAdminFace",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-14T02:00:00Z",
                        "end": "2023-09-14T10:00:00Z",
                        "count": 0,
                        "segmentLabel": "Admin McAdminFace",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-14T10:00:00Z",
                        "end": "2023-09-14T18:00:00Z",
                        "count": 0,
                        "segmentLabel": "Admin McAdminFace",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-14T18:00:00Z",
                        "end": "2023-09-15T02:00:00Z",
                        "count": 1,
                        "segmentLabel": "Admin McAdminFace",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-15T02:00:00Z",
                        "end": "2023-09-15T10:00:00Z",
                        "count": 0,
                        "segmentLabel": "Admin McAdminFace",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-15T10:00:00Z",
                        "end": "2023-09-15T18:00:00Z",
                        "count": 0,
                        "segmentLabel": "Admin McAdminFace",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-13T18:00:00Z",
                        "end": "2023-09-14T02:00:00Z",
                        "count": 0,
                        "segmentLabel": "Nathaniel Cook",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-14T02:00:00Z",
                        "end": "2023-09-14T10:00:00Z",
                        "count": 0,
                        "segmentLabel": "Nathaniel Cook",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-14T10:00:00Z",
                        "end": "2023-09-14T18:00:00Z",
                        "count": 0,
                        "segmentLabel": "Nathaniel Cook",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-14T18:00:00Z",
                        "end": "2023-09-15T02:00:00Z",
                        "count": 2,
                        "segmentLabel": "Nathaniel Cook",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-15T02:00:00Z",
                        "end": "2023-09-15T10:00:00Z",
                        "count": 0,
                        "segmentLabel": "Nathaniel Cook",
                        "__typename": "TimeSeriesBucket"
                    },
                    {
                        "start": "2023-09-15T10:00:00Z",
                        "end": "2023-09-15T18:00:00Z",
                        "count": 0,
                        "segmentLabel": "Nathaniel Cook",
                        "__typename": "TimeSeriesBucket"
                    }

[Forfold]

After some seeing that I can pass data to the Line itself, I was able to get around this issue by no longer setting the data on the LineGraph component, but by setting the data upfront on each Line.

  type Stat = {
    start: string
    end: string
    count: number
    segmentLabel: string
  }
  type Stats = Array<Stat>
  type LabelDict = { [key: string]: Stat[] }
  
  const [segmentLabels, setSegmentLabels] = useState<LabelDict>({})
  useEffect(() => {
    const sl: LabelDict = {}
    stats.forEach((stat) => {
      if (!sl[stat.segmentLabel]) sl[stat.segmentLabel] = [stat]
      else sl[stat.segmentLabel].push(stat)
    })
    setSegmentLabels(sl)
  }, [stats])

and in my JSX:

{Object.keys(segmentLabels).map((label, index) => (
  <Line
    key={label}
    dataKey='count'
    data={segmentLabels[label]}
    name={label}
  />
))}