Highlight onBrushEnd triggered when brushing over a mark

[martoncsikos]

Demo: https://codepen.io/marton/pen/MZedBN

To reproduce start dragging a box and, while dragging, hit one of the marks with the corner of the box. I causes the onBrushEnd event to trigger, if you use the highlight component for zooming this immediately triggers a zoom, which is annoying.

I can resolve this by reversing the order of the components and putting the MarkSeries before the Highlight however if I do that my events on the MarkSeries (ex. onValueMouseOver) will no longer trigger at all.

Is there a way I can have both onValueMouseOver triggers and a Highlight component?

Thanks.

[mcnuttandrew]

I would consider adding a class trigger on the containing component, such that when you start brushing the parents class changes (something like '.brushing') which has a corresponding css rule like

.brushing . rv-xy-plot__series rv-xy-plot__series--mark {
    pointer-events: none;
}

[adammartiska]

Hello guys, was there any progress on this how it was resolved? Facing the same issue while I start selecting zoom area whenever I hit the graph borders zoom is triggered. This isn't really best user experience.

[Atrus619]

encountered the same problem - andrew's solution works like a charm. TLDR:

1. Highlight goes first in the render order
2. Give your series a conditional css class that is active while you are brushing (simple example: turn it on with onBrushStart and off with onBrushEnd). Use this class to disable pointer events in your style sheet temporarily.