I've been trying to create a chart with recharts in react and I keep on getting the same issue with custom x-axis ticks rendering when using the <Brush /> component.
I have a chunk of data to display for 1 day: [{ date: '9:30', value: 1 }, { date: '9:35', value: 2 }, ...]
There are also x-axis ticks for every hour generated separately: ['9:00', '10:00', ...]
If I don't use zoom with the brush it looks like this but when I'm trying to zoom-in to see a specific time range all ticks disappear but one .
I can get the brush to work without custom ticks but I really need to show only hours without any intermediate values like 9:45 on the x-axis. Would be very glad to hear any feedback.
React v17.0.2
Recharts v2.1.9
Chrome Version 103.0.5060.53 (Official Build) (x86_64)
This example in a sandbox: https://codesandbox.io/s/simple-area-chart-forked-4kojl9?file=/src/App.tsx