title: Recharts tooltip with pointer (react,tooltip) - code part
body: <p>This question is the code for the question posted here:<a href="https://stackoverflow.com/questions/43257143/recharts-tooltip-with-pointer-react-tooltip?noredirect=1#comment73590128_43257143">Recharts tooltip with pointer (react,tooltip)</a>. </p>
  
  <p>The original question: </p>
  
  <p>On a line graph trying to display tooltip with pointer that shows dashed lines going to x-axis and y-axis accordingly. The problem is I can use them separately but not together because onMouseMove state interferes with the display of the tooltip. Is there a solution for this?</p>
  
  <p>Chart.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import moment from 'moment';
  import './Chart.css';
  
  import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, ResponsiveContainer,Cross } from 'recharts';
  
  class Chart extends Component {
  
  constructor(props) {
      super(props);
      this.state = {
        chartX: 0,
        chartY: 0,
        hover:false
      };
  
      this.onMouseMoveHandler = this.onMouseMoveHandler.bind(this);
    }
    isOverMaxBitrate (data,ensemble) {
      return data.reduce((acc, d) =&gt; acc || d.bitrate &gt; ensemble.get('maxBitrate'), false);
    }
  onMouseMoveHandler(e) {
     // e.chartX, e.chartY
            //this.setState({hover: true});
         //   console.log("chartX " + e.chartX + "chartY" + e.chartY);
        // if(e.chartX.toString() !='undefined' &amp;&amp; e.chartY.toString() !='undefined'){
         if( (Object.prototype.toString.call(e.chartX)!= Object.prototype.toString.call(undefined))&amp;&amp; (Object.prototype.toString.call(e.chartY)!= Object.prototype.toString.call(undefined)) ){
  //      console.log (" DEFINED e.chartX " + e.chartX.toString() + " e.chartY" + e.chartY.toString())
            this.setState({ chartX: e.chartX , chartY: e.chartY, hover: true });
         }
         else{
            this.setState({  hover: false });
  //          console.log ("Undefined e.chartX  e.chartY"  )
            }
           /* prevState =&gt; ({
                  hover: !prevState.hover*/
        }
  
      onMouseEnterHandler() {
         // console.log('enter');
          this.setState({
              hover: true
          });
      }
      onMouseLeaveHandler() {
         // console.log('leave');
          this.setState({
              hover: false
          });
      }
    render() {
      const { ensemble, data, onClick ,startDay,endDay} = this.props;
          var dateBeforeMidnight = "";
          var dateAfterMidnight = "";
  //console.log ("start " + startDay + "end " + endDay    )
  var verticalLine;
  var horizontalLine;
   if(this.state.hover) {
             verticalLine =  &lt;line x1={this.state.chartX} y1={10} x2={this.state.chartX} y2={260}   stroke="green" strokeDasharray= '3 3' /&gt;;
             horizontalLine =  &lt;line x1={60} y1={this.state.chartY} x2={850} y2={this.state.chartY}  strokeDasharray= '3 3' stroke="blue"   /&gt;;
          }else{
          verticalLine = null;
         horizontalLine = null;
          }
  
     // console.log(this.state);
  
      // startDay: { format(string) -&gt; string }
      //
      return (
        &lt;div className='Chart'  &gt;
          &lt;div className='Chart-bg' &gt;
            &lt;h3 className='Chart-title'&gt;{ ensemble.get('description') }&lt;/h3&gt;
            &lt;ResponsiveContainer aspect={3} width='100%'    &gt;
              &lt;LineChart data={data} margin={{ top: 10, bottom: 10, left: 0, right: 50 }} onClick={onClick} onMouseMove={this.onMouseMoveHandler.bind(this)} onMouseEnter={this.onMouseEnterHandler.bind(this)}  onMouseLeave={this.onMouseLeaveHandler.bind(this)}  &gt;
  
              {verticalLine}
              {horizontalLine}
  
                &lt;CartesianGrid stroke='#ccc'  /&gt;
                &lt;XAxis dataKey='time'  /&gt;
                &lt;YAxis domain={['auto', 'auto']}/&gt;
                 &lt;Tooltip /&gt;
                &lt;ReferenceLine y={ensemble.get('maxBitrate', 0)} stroke='red' /&gt;
               &lt;ReferenceLine x="00:00" stroke='red' label={moment(this.props.startDay).format("dddd MMMM D ")  +  '         ' +   '      ,    ' +     moment(this.props.endDay).format("dddd MMMM D ")}&gt;&lt;/ReferenceLine&gt;
  
                &lt;ReferenceLine x="12:00 am" stroke='red' label={moment(this.props.startDay).format("dddd MMMM D ")  +  '          ' +  '     ,     ' +       moment(this.props.endDay).format("dddd MMMM D ")} &gt;&lt;/ReferenceLine&gt;
  
                &lt;Line type='monotone' dataKey='bitrate'  stroke={this.isOverMaxBitrate(data, ensemble) ? 'red' : 'blue'}/&gt;
  
              &lt;/LineChart&gt;
            &lt;/ResponsiveContainer&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
  
  
      );
    }
  }
  
  export default Chart;
  
  Chart.css</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Chart {
    border: 1px solid black;
    background-color: grey;
  }
  
  .Chart:not(:first-child) {
    margin-top: 10px;
  }
  
  .Chart-bg {
    background-color: white;
  }
  
  .Chart-title {
    margin: 0;
    padding-top: 5px;
  }
  
  .Chart .recharts-surface {
    cursor: pointer;
  
  
        padding: 10px;
  
  }
  
  
  .customizedTooltip{
  
   pointer-events: none;
   position:absolute;
   display:block;
   opacity:1;
   width:100%;
   placement: bottom;
   opacity:0.7;
   z-index:1000000;
   visibility:visible;
  
  
  }
  
  
  .wrapper {
  
  
    position: relative;
    pointer-events:auto;
    opacity:0.5;
    visibility:visible;
  
  
  
  
  
  
  }</code></pre>
  </div>
  </div>
  </p>