Mouseover not getting triggered when two line mark series are overlapping in react-vis

Question

In my application, I am using react-vis to display two line mark series. When the mouse hovers on the mark, a hint is shown. In certain cases, this mouse over is not getting triggered. I have given the code below.

import React, { Component } from 'react'; import {XAxis, FlexibleWidthXYPlot, YAxis, LineMarkSeries, Hint } from "react-vis"; import './App.css';

class App extends Component {

constructor(props) {
    super(props);

    this.state = {
        hintData : {},
        hintHover : false
    };
    this.tickFormat = this.tickFormat.bind(this);
    this.getHintSection = this.getHintSection.bind(this);
    this.mouseOver = this.mouseOver.bind(this);
    this.mouseOut = this.mouseOut.bind(this);
}

tickFormat(key) {
    const splitString = "-";
    const splittedKey = key.split(splitString);
    const week = splittedKey[1];
    return week;
}

getHintSection(isHintVisible) {
    return isHintVisible ?
      <Hint value={this.state.hintData}>
          <div style={{background: 'black'}}>
                {this.state.hintData.x} <br/>
                {this.state.hintData.y}
          </div>
      </Hint> : null;
  }

mouseOver(datapoint) {
    this.setState({hintData : datapoint, hintHover :true});
}

mouseOut(datapoint) {
    this.setState({hintData : datapoint, hintHover :false});
}


render() {
    let ly = [{"x":"2019-21","y":141270.4113},{"x":"2019-22","y":148032.6853},{"x":"2019-23","y":133166.3549},{"x":"2019-24","y":144555.8317},{"x":"2019-25","y":148989.326},{"x":"2019-26","y":154936.6971},{"x":"2019-27","y":143121.3033},{"x":"2019-28","y":127417.6843},{"x":"2019-29","y":137611.2275},{"x":"2019-30","y":155303.9058},{"x":"2019-31","y":159145.5424},{"x":"2019-32","y":147832.1768},{"x":"2019-33","y":140558.6808},{"x":"2019-34","y":163493.7706},{"x":"2019-35","y":158733.5571},{"x":"2019-36","y":153541.6172},{"x":"2019-37","y":153952.6542},{"x":"2019-38","y":109995.8389},{"x":"2019-39","y":143138.1519},{"x":"2019-40","y":145308.4907},{"x":"2019-41","y":157985.7649},{"x":"2019-42","y":125786.7651},{"x":"2019-43","y":172169.0872},{"x":"2019-44","y":157065.8774},{"x":"2019-45","y":158571.5438},{"x":"2019-46","y":144577.6178},{"x":"2019-47","y":143184.0778},{"x":"2019-48","y":152131.5728},{"x":"2019-49","y":144523.9783},{"x":"2019-50","y":138136.235},{"x":"2019-51","y":144134.0461},{"x":"2019-52","y":131489.7967},{"x":"2019-53","y":20350.7817},{"x":"2020-01","y":89539.0572},{"x":"2020-02","y":132872.9236},{"x":"2020-03","y":106450.4828},{"x":"2020-04","y":109363.71},{"x":"2020-05","y":123938.9689},{"x":"2020-06","y":133286.4406},{"x":"2020-07","y":132281.1586},{"x":"2020-08","y":120349.3911},{"x":"2020-09","y":139654.5261},{"x":"2020-10","y":138938.9757},{"x":"2020-11","y":143939.1749},{"x":"2020-12","y":136084.7265},{"x":"2020-13","y":83493.8253},{"x":"2020-14","y":111638.4639},{"x":"2020-15","y":127725.7994},{"x":"2020-16","y":129957.4428},{"x":"2020-17","y":138573.7561},{"x":"2020-18","y":99871.6431}];
    let ty = [{"x":"2019-21","y":123902.6944},{"x":"2019-22","y":125116.6517},{"x":"2019-23","y":129482.6028},{"x":"2019-24","y":113765.7181},{"x":"2019-25","y":128028.6767},{"x":"2019-26","y":133071.9467},{"x":"2019-27","y":129452.9942},{"x":"2019-28","y":144334.7556},{"x":"2019-29","y":131803.2536},{"x":"2019-30","y":128058.7279},{"x":"2019-31","y":132920.1875},{"x":"2019-32","y":139728.7424},{"x":"2019-33","y":140404.7564},{"x":"2019-34","y":142156.6469},{"x":"2019-35","y":145447.9253},{"x":"2019-36","y":139281.1122},{"x":"2019-37","y":128056.8897},{"x":"2019-38","y":76217.5228},{"x":"2019-39","y":140638.7192},{"x":"2019-40","y":140774.4656},{"x":"2019-41","y":137503.2008},{"x":"2019-42","y":138770.9367},{"x":"2019-43","y":62433},{"x":"2019-44","y":104521.0036},{"x":"2019-45","y":41243.8242}];

    return (
        <div className ="result-table">
            <FlexibleWidthXYPlot xType="ordinal" height={330} margin={{ left: 80 }}>
                <XAxis tickFormat={this.tickFormat}/>
                <YAxis />
                <LineMarkSeries data={ly}
                   onValueMouseOver={this.mouseOver}
                   onValueMouseOut={this.mouseOut}
                  size="2"
                  stroke="red"
                  fill="red"
                />
                <LineMarkSeries data={ty}
                   onValueMouseOver={this.mouseOver}
                   onValueMouseOut={this.mouseOut}
                  size="2"
                />
                {this.getHintSection(this.state.hintHover)}
            </FlexibleWidthXYPlot>
        </div>
    );


}

}

export default App;

Answer 1

You could use 2 LineSeries and 1 MarkSeries and use only one callback on MarkSeries. Example below:

<LineSeries
  data={dataOne}
/>
<LineSeries
  data={dataTwo}
/>
<MarkSeries
  data={[...dataOne,...dataTwo]}
  onNearestXY={(val, {index}) => {
    //do smth
  }}
/>