Area Chart + Brush: Descending data is reversed on brush

[cerahmed]

Do you want to request a feature or report a bug?

Report a bug/missing feature.

What is the current behavior?

I have an Area Chart to display datetime on the x-axis, and percentage on the y-axis.
The data is loaded progressivly by descending order. That is, items[0] = newest and items[length-1] = oldest. This way, the user sees the newest data as the remaining data is loaded.

However, the brush is reversed. Dragging the left handle of the brush cuts the right side of the area chart, and vice versa.

I tried reversing the startIndex and endIndex of Brush, but that made the Area Chart disappear (due to the start index is now larger than the end index?)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo.

Codesandbox demo

What is the expected behavior?

The Brush follows the Area Chart order. Meaning, left handle cuts from the left, and right from the right.
Preferably, a reversed property on the Brush component that bisects the data array in a reversed order.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

react: 18.2.0
recharts: 2.12.4

[cerahmed]

I think I got it working by reversing the data array with each API call; making the newest item always the last item in the array.

[ckifer]

This is still odd and shouldn't be the case. I'm pretty sure this doesn't happen with other charts.. I'll check out out at some point. If you could make a small reproduction in a sandbox that would be awesome

[ckifer]

@cerahmed looks like your sandbox isn't accessible. Could you make it public?

[cerahmed]

@cerahmed looks like your sandbox isn't accessible. Could you make it public?

Appologies about that, first time using sandbox. Please check if it's working now.

[ckifer]

Yeah I can, thanks!

[ckifer]

So adding a sort to your data "fixes" it

.sort((a, b) => a.datetime > b.datetime);

I thought it was because the Brush chart didn't have a corresponding XAxis, but it doesn't seem thats the problem. This warrants further investigation. I'll reopen it

[cerahmed]

This is still odd and shouldn't be the case.

It is indeed; however after a second thought, it makes sense.
As I understand it, Brush deals with how the data array is actually sorted, not how the data is visually represented.

For example, both arrays [0,1,2,3,4,5,6,7,8,9,10] and [10,9,8,7,6,5,4,3,2,1,0] will be drawn identically on an x-axis with type of number and a domain from 0 to 10. However, the start and end indeces will be different.

Hence, when the left handle of the brush moves one unit to the right, the 0 on the first array will be dropped, while 10 on the second array will be dropped. This causes the chart to be cut from the left in the first case, and from the right in the second case.

[ckifer]

ah you're right. Internally recharts doesn't do any sorting for numerical axes because d3 does the work with numeric scales to interpolate where they would be on the axis. But Brush is an internal implementation based solely on indices, and those two ideas don't work well together.

So it makes sense, but I wouldn't say its ideal. Brush is unreliable for numeric data that isn't pre-sorted.
So I guess we could say bug/enhancement?

[cerahmed]

So I guess we could say bug/enhancement?

Fair enough :D I'll be back with ideas on how to fix the issue if I get any.