title: how to resolve the problem that hovering mouse on chart will appear old data/charts?
body: <p>I used react hooks useEffect for rendering a chart from chart.js to canvas. However, I found problem of old chart showing when I hover my mouse on the chart. From the sources I found online I realized the problem might be able to solve by chart.destroy(), but I just do not know where and how to use it in my case of code. I have attached a snip of my code here, hope anybody can help me out.</p>
  <pre><code>import React, { useEffect } from 'react';
  import Chart from 'chart.js';
  import { Card } from 'components/Card';
  import { localDateTime, dateFilter } from 'helpers';
  
  const red = '#644DFF';
  const purple = '#F73F64';
  
  const DailyTrafficCard = (props) =&gt; {
    const { store, capacity, data, setVar} = props;
  
    const lastSevenDays = Array(7)
      .fill()
      .map((_, i) =&gt; {
        const localdate = localDateTime(store);
        return localdate()
          .subtract(i, 'day')
          .format('YYYY-MM-DD[T]07:00:00[Z]');
      });
    useEffect(() =&gt; {
      const ctx = document &amp;&amp; document.querySelector('#daily-traffic-chart');
      if (!ctx) {
        return;
      }
      const bar = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: [],
          datasets: [{
            data: data[data.length-1],
            barThickness: 13,
            backgroundColor: (ctx) =&gt; {
              const idx = ctx &amp;&amp; ctx.dataIndex;
              const val = ctx &amp;&amp; ctx.dataset &amp;&amp; ctx.dataset.data &amp;&amp; ctx.dataset.data[idx];
              return val &lt; 40 ? purple : red;
            }
          }]
        },
        options: {
          intersect: false,
          legend: {
            display: false,
          },
          scales: {
            xAxes: [{
              type: 'time',
              offset: true,
              time: {
                unit: 'hour',
                displayFormats: {
                  hour: 'HH',
                },
              },
              ticks: {},
              gridLines: {
                display: false,
              },
            }],
            yAxes: [{
              gridLines: {
                display: true,
              },
              ticks: {
                beginAtZero: true,
                min: 0,
                max: capacity,
                stepSize: 5
              },
            }],
          },
        }
      });
  
    }, [data,capacity]);
  
    const handleOnChange = (event) =&gt; {
      setVar(event.target.value);
    }
    return (
      &lt;Card
        classname=&quot;DailyTrafficCard&quot;
        icon={&lt;span&gt;&lt;i className=&quot;icon-user&quot;/&gt;&lt;/span&gt;}
        title={&lt;h3&gt;Daily Traffic Analytics&lt;/h3&gt;}&gt;
        &lt;div className=&quot;daily&quot;&gt;
          &lt;div className=&quot;daily-head p-4 text-center&quot;&gt;
            &lt;select className=&quot;py-2 px-3&quot; onChange={handleOnChange}&gt;
              {lastSevenDays.map(date =&gt; (
                &lt;option key={date} value={date}&gt;{dateFilter(date, 'dddd')}&lt;/option&gt;
              ))}
            &lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div className=&quot;px-8&quot;&gt;
            {data &amp;&amp; data.length &gt; 0 &amp;&amp; (
              &lt;canvas width=&quot;250&quot; id=&quot;daily-traffic-chart&quot;&gt;&lt;/canvas&gt;
            )}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Card&gt;
    )
  }
  
  export {
    DailyTrafficCard
  }
  </code></pre>