how to trigger hover events for elements behind other elements?

[sergeykimaia]

on a chart im working on i have scatter points and a VictoryBrushLine
but one prevents the other from receiving events, any ideas?

in my example i want to trigger background change on scatter points on hover, but want the brush behavior to be unchanged

here's the code:

<VictoryChart domainPadding={50}>
  <VictoryScatter
    size={4}
    style={{ data: { fill: "tomato" }}}
    data={[
      { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 4 }
    ]}
    events={[{
          target: 'data',
          eventHandlers: {
            onMouseOver: () => {
              return [{
                mutation: (props) => ({ style: { ...props.style, fill: 'green' } })
              }]
            },
            onMouseOut: () => [{
              mutation: () => null
            }]
          }
        }]}
  />
  <VictoryAxis
    tickValues={[1, 2, 3]}
    gridComponent={
		<VictoryBrushLine width={30}
		allowDrag={false}
		allowResize={false}
        
    	/>
    }
  />
</VictoryChart>

[sergeykimaia]

found a solution, i'll have two victoryBrushLines, the one on top will have pointerEvents: 'none', and the one behind the scatter points will use events to trigger the one on top