I am working on an Angular project where I use Plotly to display both 2D and 3D graphs. I have successfully implemented synchronization from the 3D graph to the 2D graph on hover, where the same coordinates are displayed in both graphs. However, I am encountering an issue when trying to synchronize hover events from the 2D graph to the 3D graph.

When I hover over the 2D graph, I would like the corresponding point to be highlighted in the 3D graph. I have inspected the issue and found that the coordinates are being calculated on a canvas inside the 3D graph, which might be causing the synchronization problem.

Here is my code:

showTooltip(point: any, data?: any) {
    const is3D = !!point.z || !!data?.z;
    const z = point.z ?? (data ? data.z && data.z[point.pointNumber] : null);
    const annotations = is3D
      ? [
          {
            x: point.x,
            y: point.y,
            text: `(${point.x}, ${point.y}, ${z})`,
            showarrow: true,
            arrowhead: 7,
            ax: 0,
            ay: -40,
          },
        ]
      : [
          {
            x: point.x,
            y: point.y,
            z: z,
            text: `(${point.x}, ${point.y})`,
            showarrow: true,
            arrowhead: 7,
            ax: 0,
            ay: -40,
          },
        ];

    const update = { annotations };
    Plotly.relayout(this.graphContainer?.nativeElement, update);
  }

  hideTooltip() {
    const update = {
      annotations: [],
    };
    Plotly.relayout(this.graphContainer?.nativeElement, update);
  }

Check out the screenshot