Highlight & Zoom Broken in v2.4

[swively]

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

Reproduction link

https://recharts.org/en-US/examples/HighlightAndZoomLineChart

Steps to reproduce

Check out the recharts.org example page for Highlight and Zoom Line Chart, its broken there as well.
Once you zoom in any amount, all inner data points are no longer highlightable (tooltip or click), only the first and last data points, so you can no longer interact with the charts and tooltips are broken

What is expected?

You should be able to further zoom, as well as see a tooltip for each datapoint in the frame.

What is actually happening?

All inner datapoints are no longer accessible

Environment	Info
Recharts	v2.4.1
React	18.2
System	OSX
Browser	Chrome

[ckifer]

Thanks for the report, I see what you mean - will take a look as soon as I can

[ckifer]

Here is a more up to date codesandbox using hooks - https://codesandbox.io/s/highlight-zomm-line-chart-forked-holzzh?file=/src/App.tsx

Same behavior though

[ckifer]

Added an example in the storybook here - https://master--63da8268a0da9970db6992aa.chromatic.com/?path=/story/examples-linechart-highlightandzoom--highlight-and-zoom

Will use this to debug (@Yilun-Sun @nikolasrieble @proke03 also feel free to use this to debug if you want to help before I can get around to it)

[ckifer]

Somewhere after d8ea0c8 and before 322c4b6

[ckifer]

Between 2732d71 and 322c4b6

[ckifer]

Winner winner I believe 642dd59

or PR

#3293

[ckifer]

tooltipTicks go from 20 to 2 here

recharts/src/chart/generateCategoricalChart.tsx

Line 263 in 62bdd66

const { orderedTooltipTicks: ticks, tooltipAxis: axis, tooltipTicks } = state;

after zoom

Makes sense why the issue occurs

[ckifer]

if allowDataOverflow is set to false for the XAxis only then the Y axis behaves as it should. Issue is with tick calculation when allowDataOverflow is true on the XAxis

This is even called out in the PR desc

We could short-circuit the domain creation in one scenario:

• allowDataOverflow is set to true
• the specified domain (start AND end) was provided via props with two values

Action item will be to look at the PR diff to figure out why exactly this isn't behaving as it should. Probably a larger issue :/

[ckifer]

Released 2.4.2 - check out https://codesandbox.io/s/highlight-zomm-line-chart-forked-holzzh?file=/src/App.tsx and let me know if you have any other issues.

Thanks @swively