Adjust dataZoom behavior based on mouse hover position: differentiate between chart and y-axis hover

[23andreas]

I want to configure the component's scrolling behavior to adapt based on where the mouse is hovering:

• When the mouse hovers over the main chart area: Scrolling the mouse wheel should zoom in and out horizontally, adjusting the x-axis range.
• When the mouse hovers over a y-axis: Scrolling the mouse wheel should zoom in and out on that specific y-axis, adjusting only its range.

My chart includes multiple y-axes, so I need the scrolling to only affect the y-axis that the mouse is directly hovering over, without impacting other y-axes.

Current Approach:

Currently, I’m trying to achieve this by creating two separate dataZoom configurations and activating/deactivating them based on mouse hover events. I’ve also noticed that dataZoom can target individual y-axes using the yAxisIndex property

When hovering a yAxis

    dataZoom: [
      {
        type: 'inside',
        orient: 'vertical',
        filterMode: 'none',
        yAxisIndex: <y axis currenlty being hovered>,
      }
    ]

When hovering the main chart

    dataZoom: [
      {
        type: 'inside',
        orient: 'horizontal',
        filterMode: 'none',
     }
    ]

However, I’m encountering some issues with this approach, using yAxis.triggerEvent, hover events are only triggered when the mouse is over the y-axis value labels, not over the entire axis line or area.

Question:
Is there a more effective way to detect hover on the entire y-axis, not just the value labels? Alternatively, is there a better approach to achieve the desired behavior without relying on these hover events?

Any guidance or suggestions would be appreciated!