Tooltip SyncMethod not working

[LucieSumToZero]

Hi.
I have 2 different AreaCharts based on the 2 data set below. The 2 data set arrays have different sizes. I would like to synchronize the tooltips of the 2 AreaCharts based on the category values of the data set. As you can see in the data sets, the values of the category (the x values) are different between the 2 data sets. For instance element 0 in the first data set has category value equal to about 1.828, but there is no corresponding category value in the second data set.
I thought SyncMethod = 'value' would work with my data sets, but unfortunately it's not working. Is that expected? Would there be an alternative?
Thanks for you help.

First data set:

Second data set:

[ckifer]

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?

[LucieSumToZero]

Hey @ckifer

Thanks for your answer.
Please see how I have things set up in this codesandbox: [https://codesandbox.io/s/synchronized-area-chart-forked-mxkebw?file=/src/App.tsx]
As you can see the categories are not the same but the 2 charts share common range for the x values (the x interval of the second chart is included in the x interval of the first chart). The intention here is to have a tooltip displayed on both charts when we are hovering over this common interval. Do you have a solution?
Would it be possible to have a continuous tooltip when going across the range of the x axis values instead of a tooltip jumping from one value to the other? Indeed, if the tooltip was continuous, then both charts could be synchronized.

Thanks

[Yilun-Sun]

Hi @LucieSumToZero ! Thanks for the example!
I think you could use syncMethod to 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

const 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

CodeSandbox

https://codesandbox.io/s/synchronized-area-chart-forked-rv4ueb?file=/src/App.tsx

[LucieSumToZero]

Hi @Yilun-Sun ,

Thanks a lot for this great solution! Thanks a lot for your precious help!