Fix LineMarkSeries blocking pointer events on other LineMarkSeries

[samulisuomi]

Fixes https://github.com/uber/react-vis/issues/1004 (and probably https://github.com/uber/react-vis/issues/1099#issuecomment-463553067).

Issue

Having multiple LineMarkSeries overlapping in a single plot may result in some of the marks not firing the onValueMouseOver callback.

This is because the LineMarkSeries draws an invisible area with the <plot> that is blocking pointer events on marks rendered behind it. I've set lineStyle={{ fill: "#80808080" }} in my codesandboxes to highlight this otherwise invisible area.

Before

https://codesandbox.io/s/43q7xyq3vw

After

https://codesandbox.io/s/xp3w5kly1p

[CLAassistant]

All committers have signed the CLA.

[samulisuomi]

Now that I thought about this more, shouldn't this bug also appear when using just LineSeries? I'm not sure how to fix the issue in that case. For LineMarkSeries, fixing the issue this way seems like a reasonable approach for now but let me know if you have other ideas.

[bmaupin]

This should fix #1157 as well

[danchyy]

Will this Pull Request get merged anytime soon?

[bmaupin]

Will this Pull Request get merged anytime soon?

My guess is the answer is no. This repository appears to be unmaintained as per https://github.com/uber/react-vis/issues/1303

Thankfully the workaround is pretty straightforward: https://github.com/uber/react-vis/issues/1004#issuecomment-481666020

[danchyy]

Thanks for reply @bmaupin . Could you help me out just a bit more please, should that CSS you mentioned in #1004 be assigned to style variable of LineMarkSeries?

Like this?

<LineMarkSeries
   data={[...]}
   style={{
         lineStyle: {
              pointerEvents: 'none'
         }
   }}/>

[Hivemind9000]

Thanks for reply @bmaupin . Could you help me out just a bit more please, should that CSS you mentioned in #1004 be assigned to style variable of LineMarkSeries?

Like this?

<LineMarkSeries
   data={[...]}
   style={{
         lineStyle: {
              pointerEvents: 'none'
         }
   }}/>

You probably figured it out already, but for any future readers of this issue:

lineStyle is a property of LineMarkSeries (and probably LineSeries) though it doesn't seem to be in the documentation.

<LineMarkSeries
   data={[...]}
   lineStyle: {
       pointerEvents: 'none'
   }
 />

There's also a markStyle property you can set, if needed.