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;

In this image, X-axis value 28 Mouse over is working for the blue line, but redline it does not work

Pavlo Zabaikin · Answer 1 · 2019-11-28T09:56:02.307

0

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
  }}
/>

edited Nov 28 '19 at 09:56

answered Nov 21 '19 at 19:26

Pavlo Zabaikin

26
5

i have solved it by using both LineMarkSeries and MarkSeries together, and moved the onValueMouseOver and onValueMouseOut to MarkSeries, in that case it was working. But Just using LineMarkSeries that overlap problem is there – Subramony_Mahadevan Nov 28 '19 at 07:04

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

1 Answers1