title: How to customise the tooltip data in react 'recharts'?
body: <p>In React application (using Next.js), I am trying to implement graph feature using <code>recharts</code> <a href="http://recharts.org/en-US/api/LineChart" rel="nofollow noreferrer">http://recharts.org/en-US/api/LineChart</a>. Right now I am trying to display the date and price value in tooltip, price is displaying properly but date is static for all dots(on hover)</p>
  <p>My code is like</p>
  <p>/index.js</p>
  <pre><code>const formatDate = (value) =&gt; {
    return moment(value).format('HH:MM A DD MM, YYYY')
  }
  
  const weeklyData = [
   { date: formatDate(1613619000), price: '1200.00' },
   { date: formatDate(1613617200), price: '1300.83' },
   { date: formatDate(1613615400), price: '1250.23' },
   { date: formatDate(1613611800), price: '500.55' },
   { date: formatDate(1613608200), price: '1600.23' },
   { date: formatDate(1613606400), price: '1850.93' },
   { date: formatDate(1613604600), price: '1750.23' },
   { date: formatDate(1613599200), price: '650.23' },
  ]
  
  &lt;LineChart
        width={900}
        height={250}
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      &gt;
        &lt;Tooltip content={&lt;CustomTooltip /&gt;} cursor={false} /&gt;
        &lt;Line type=&quot;monotone&quot; dataKey=&quot;price&quot; stroke=&quot;#4ec6f4&quot; label=&quot;Shruthi&quot; /&gt;
  &lt;/LineChart&gt;
  </code></pre>
  <p>/tooltip.js</p>
  <pre><code>const CustomTooltip = ({ active, payload, label }) =&gt; {
    if (active &amp;&amp; payload &amp;&amp; payload.length) {
      return (
        &lt;div className=&quot;tooltip&quot;&gt;
         &lt;p className=&quot;tooltipLabel&quot;&gt;{`$${payload[0].payload?.price}`}&lt;/p&gt;
         &lt;p className=&quot;tooltipDesc&quot;&gt;{`${payload[0]?.payload?.date}`}&lt;/p&gt;
        &lt;/div&gt;
      )
     }
  
    return null
  }
  
  CustomTooltip.propTypes = {
    type: PropTypes.string,
    payload: PropTypes.array,
    label: PropTypes.string,
  }
  
  export default CustomTooltip
  </code></pre>
  <p>How can I customise this graph as per my requirement?</p>