Synchronized graph do not synchronize on XAxis range move

[raomin]

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

Reproduction link

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

Steps to reproduce

1. Zoom to the end: Move left brush handle to the right to only display Page E, Page F, Page G. All graphs are synchronized and display the same xaxis
2. Drag the brush to the left to display Page A, Page B, Page C.

What is expected?

I would expect that the 3 graphs displays the same part of the XAxis

What is actually happening?

Only the graph with the brush display the expected range of XAxis. The other graphs remain with the XAxis range on Page E, Page F, Page G.

Environment	Info
Recharts	v2.0.8
React	17.0.1
System	nodejs 6.14.11
Browser	Chrome 86.0.4240

[StR1nG7]

I noticed in my local project, if remove Tooltip component from graph with Brush inside, Brush will works correctly. But in this case (without Tooltip), we will have not synchronized tooltips - if hover graph with brush, tooltips will not appear in this and other graphs.

[natBizitza]

I noticed in my local project, if remove Tooltip component from graph with Brush inside, Brush will works correctly. But in this case (without Tooltip), we will have not synchronized tooltips - if hover graph with brush, tooltips will not appear in this and other graphs.

Is it still the only solution?

[natBizitza]

Until it's solved in the library, you can avoid the issue by wrapping the brush in another chart and setting the same syncId to it.

BTW, this demo helped me!

[inkinkz]

Until it's solved in the library, you can avoid the issue by wrapping the brush in another chart and setting the same syncId to it.

BTW, this demo helped me!

omg, thank you

[tfc]

@natBizitza thank you, this is a very elegant workaround. 🙏

Is anything done on this? The bug seems to be more than a year old.

[Kwonkunkun]

Until it's solved in the library, you can avoid the issue by wrapping the brush in another chart and setting the same syncId to it.

BTW, this demo helped me!

good solution!! thank you

but, it is weird that not fix immediatly the bug. I think this bug is critical..

[otudosa]

By default syncMethod uses the index to synchronize the charts, that's why when you use the brush to zoom in, you get different categories displayed. In order to be able to get the same category, even when you use the brush, you need to set syncMethod to value.
You can read more about it in the docs https://recharts.org/en-US/api#syncMethod