[Chartjs]-Update only Chart.js without animations and without refreshing the browser

by

1👍

I don’t know what you mean by “it keeps refreshing the browser” – the update method only updates the chart. It in no way should be refreshing the whole page.

But you can prevent animation when calling update by passing 0 as the only parameter, as documented:

Sometimes when a chart updates, you may not want an animation. To achieve this you can call update with a duration of 0. This will render the chart synchronously and without an animation.

0👍

The answer is, the button was inside a form in the HTML, that why it was refreshing the whole page.
Wrong example:

<div class="chart1">
      <canvas id="mychart1" ></canvas>
      <form method="POST">
        <p class="datafilter">Filtrar data:<input type="date" id="datafilter">
        <button type="submit" id="subfilt">FILTRAR</button></p>
        <button type="update" id="update" onclick="updateChart()">UPDATE</button>
      </form>
    </div>

Right example:

<div class="chart1">
      <canvas id="mychart1" ></canvas>
      <form method="POST">
        <p class="datafilter">Filtrar data:<input type="date" id="datafilter">
        <button type="submit" id="subfilt">FILTRAR</button></p>
      </form>
      <button type="update" id="update" onclick="updateChart()">UPDATE</button>
    </div>

Leave a comment