Plotly JS issue with annotations when hovermode is 'x unified'

We have a plot with multiple y-axes with hovermode = ‘x unified’. As a result the tooltip shows y-values from all series for the hovered point. This is as expected. However, we want to handle click event for each series and add annotation only on the series clicked. With hovermode = closest this works fine. When hovermode is x unified, the annotation is added to all series.

Why is hovermode relevant for click event data too? Is there any workaround for this issue? To reiterate, we need the following

  • On hover y-values from all series should be shown in a single box (works fine with hovermode = x unified)
  • On click we need to get a single data point for the clicked series only (doesn’t work with hovermode = x unified)

To see a repro of the issue, please refer to this codepen. Change the value of hovermode to see the difference.
CodePen example