Reload linechart only <p>I have this chart element</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-html lang-html prettyprint-override"><code>&lt;canvas class="main-chart" id="line-chart" height="200" width="600"&gt;&lt;/canvas&gt;</code></pre> </div> </div> </p> <p>and i have this script to insert the data</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>&lt;script&gt; function hour(){ return a=["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00", "11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00", "19:00","20:00","21:00","22:00","23:00"]; }; var data_visitors_present=&lt;?php echo json_encode(visitorsPresentDay()[0]);?&gt;; var data_visitors_previous=&lt;?php echo json_encode(visitorPreviousDay()[0]);?&gt;; var lineChartData = { labels : hour(), datasets : [ { label: "My First dataset", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : data_visitors_previous }, { label: "My Second dataset", fillColor : "rgba(48, 164, 255, 0.2)", strokeColor : "rgba(48, 164, 255, 1)", pointColor : "rgba(48, 164, 255, 1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(48, 164, 255, 1)", data : data_visitors_present } ] } &lt;/script&gt;</code></pre> </div> </div> </p> <p>The final result is this <a href="https://i.stack.imgur.com/1EI0e.png" rel="nofollow noreferrer">enter image description here</a></p> <p>I want every 10 seconds to reload only the chart element; I wrote this without effect..</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>&lt;script&gt; var chart=document.getElementById('#line-chart'); setInterval(chart){( function hour(){ return a=["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00", "11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00", "19:00","20:00","21:00","22:00","23:00"]; }; var data_visitors_present=&lt;?php echo json_encode(visitorsPresentDay()[0]);?&gt;; var data_visitors_previous=&lt;?php echo json_encode(visitorPreviousDay()[0]);?&gt;; var lineChartData = { labels : hour(), datasets : [ { label: "My First dataset", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : data_visitors_previous }, { label: "My Second dataset", fillColor : "rgba(48, 164, 255, 0.2)", strokeColor : "rgba(48, 164, 255, 1)", pointColor : "rgba(48, 164, 255, 1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(48, 164, 255, 1)", data : data_visitors_present } ] } }1000); &lt;/script&gt;</code></pre> </div> </div> </p> <p>how i can fix it?</p>