Chartjs-Vue-chartjs not rendering chart until page resize

by

1👍

✅

Solved the problem using a similar solution as "Chart with API data" from the documentation.

TL;DR: Adding a v-if on the chart

0👍

For people, that have similar problem, but not using vue.js or the official solution doesnt cut it. I had to chart.update() the graph to show values, that were added after the graph was created.

See the example. If you comment the chart.update() line, the graph will not refresh until the window is resized.

let chart = new Chart(document.getElementById("chart"), {
  type: "line",
  data: {
    labels: ["a", "b", "c", "d", "e", "f"],
    datasets: [{
      label: 'Dataset 1',
      data: [1, 5, 12, 8, 2, 3],
      borderColor: 'green',
    }]
  },
  options: {
    interaction: {
      mode: 'index',
      intersect: true,
    },
    stacked: false,
    responsive: true,
  }
});

// adding data to graph after it was created (like data from API or so...)
chart.data.labels.push("new data");
chart.data.datasets[0].data.push(9);

// with chart.update(), the changes are shown right away
// without chart.update(), you need to resize window first 
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment