React-vis: Unclickable values in separated LineMarkSeries

[dbertella]

I have different line mark series displaying on the same chart and I need to hover over the values and being able to select the point.

I have this problem when the value are close and I discover there is path covering my values.

setting the css belove solve the issue, I just want to know if it can create a problem somewhere else.

.rv-xy-plot__series {
   pointer-events: auto; /* this is all by default */
}

[mcnuttandrew]

Using point-events manipulation is a totally reasonably approach to your problem. I tend also really like using voronois for complex mouse over interactions, it's a little less plug and play but it makes for way better user interactions. The TLDR is that you should assemble a voronoi of nodes that to mouse over by combining the two sets of marks of interest.

[samulisuomi]

@dbertella @mcnuttandrew FYI, check out my PR: https://github.com/uber/react-vis/pull/1152

If you want the fix without using the forked package, just add:

lineStyle: {
  pointerEvents: 'none'
}

to each of your LineMarkSeries props.