Chartjs-Chartjs-plugin-streaming: onRefresh() callback isn't working

by

0👍

✅

You are using v2 syntax while using v3 of the lib this wont work as there are several breaking changes, see migration guide for all of them.

For example, way of defining scales has changed, you need an adapter for dates and more.

working basic v3 example:

var options = {
  type: 'line',
  data: {
    datasets: [{
      label: '# of Votes',
      data: [],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          duration: 20000,
          refresh: 100,
          delay: 200,
          onRefresh: chart => {
            const now = Date.now();
            chart.data.datasets.forEach(dataset => {
              dataset.data.push({
                x: now,
                y: Math.random()
              });
            });
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-streaming/2.0.0/chartjs-plugin-streaming.js"></script>
</body>

Leave a comment