Screenshot
\n
CodeSandbox
\nhttps://codesandbox.io/s/synchronized-area-chart-forked-rv4ueb?file=/src/App.tsx
","upvoteCount":0,"url":"https://github.com/recharts/recharts/discussions/3529#discussioncomment-5647623"}}}Tooltip SyncMethod not working #3529
-
|
Hi. First data set: Second data set: |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 6 replies
-
|
Hey @LucieSumToZero Would be awesome if you could provide a codesandbox for this (template here https://codesandbox.io/s/synchronized-area-chart-forked-bofeq8). That way we can see how you have things set up and try to suggest some solutions. My understanding is that if the categories are not the same then there is no way for the chart to be synced. What is your expected result? |
Beta Was this translation helpful? Give feedback.
-
|
Hey @ckifer Thanks for your answer. Thanks |
Beta Was this translation helpful? Give feedback.
-
|
Hi @LucieSumToZero ! Thanks for the example! 2023-04-18.18.52.16.movIt will calculate the nearby tick in data set 2 using the actived value in data set 1. Core Codeconst closest = (arr: number[], n: number) =>
arr.sort((a, b) => Math.abs(a - n) - Math.abs(b - n))[0];
export default function App() {
const syncMethodFunction = (_tooltipTicks: [], data: any) => {
const closestValue = closest(
data02.map((data) => data.x),
Number(data.activeLabel)
);
return data02.findIndex((data) => data.x === closestValue);
};
return (
<div>
<h4>A demo of synchronized AreaCharts</h4>
<AreaChart
width={500}
height={200}
data={data01}
syncId="anyId"
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="x" />
<YAxis />
<Tooltip />
<Area type="monotone" dataKey="y" stroke="#8884d8" fill="#8884d8" />
</AreaChart>
<p>Maybe some other content</p>
<AreaChart
width={500}
height={200}
data={data02}
syncId="anyId"
syncMethod={syncMethodFunction}
margin={{
top: 10,
right: 30,
left: 0,
bottom: 0
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="x" />
<YAxis />
<Tooltip />
<Area type="monotone" dataKey="y" stroke="#82ca9d" fill="#82ca9d" />
</AreaChart>
</div>
);
}Screenshot
CodeSandboxhttps://codesandbox.io/s/synchronized-area-chart-forked-rv4ueb?file=/src/App.tsx |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Yilun-Sun , Thanks a lot for this great solution! Thanks a lot for your precious help! |
Beta Was this translation helpful? Give feedback.
-
|
Hi, when adding the solution to my area charts, it deactivates the tooltip viewbox (but not the cursor). Do you have some advice on how I could make sure to keep the tooltip view bow active? I have modified the 'syncMethodFunction' as below so that it can use the 'value' and 'category' of the data shown in the post on Apr 14, 2023: Thanks for your answer |
Beta Was this translation helpful? Give feedback.
-
|
What do you mean by viewBox? |
Beta Was this translation helpful? Give feedback.
-
|
The viewbow is the rectangular area where the hovering values are shown: |
Beta Was this translation helpful? Give feedback.
-
|
Hi I'm sorry but I think we'd need a reproduction in order to help. It looks like the codesandbox that @Yilun-Sun made is still working fine |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Whereas, I would expect something like in the example done by @Yilun-Sun |
Beta Was this translation helpful? Give feedback.
Hi @LucieSumToZero ! Thanks for the example!
I think you could use
syncMethodto make it synchronized (do a little hack).2023-04-18.18.52.16.mov
It will calculate the nearby tick in data set 2 using the actived value in data set 1.
Core Code