chartjs-plugin-streaming: onRefresh() callback isn’t working

Hello I’m new in javascript world; I’m trying to display random numbers in real time with Chart.js and chartjs-plugin-streaming starting from a tutorial code which I started to modify for my scope.

const Chart= require ("chart.js");
const chartStreaming = require('chartjs-plugin-streaming');
const boxWhiteColor = "#2043CE";
const pressure_graph = document.getElementById('pressureGraph').getContext('2d');
Chart.register(chartStreaming);
let pressure_graph_config = {
        type: 'line',
        data: {
          datasets: [{
            label: 'Pressure',
            data: [],
            borderColor: boxWhiteColor,
            fill: false
          }]
        }, 
    
        options: {
          title: {
            display: true,
            text: 'PRESSURE',
            fontColor: boxWhiteColor, 
            fontSize: 30
          },
          scales: {
            xAxes: [{
              gridLines: {
                display: true, 
                drawBorder: true, 
                color: boxWhiteColor, 
                lineWidth: 5},
              ticks: {
                fontColor: boxWhiteColor,
                display: false
              },
              
              type: 'realtime',
               realtime: {
                duration: 10000,
                refresh: 100, // plot at 10 Hz
                delay:200,
                pause: false,     // chart is not paused
                ttl: undefined,   // data will be automatically deleted as it disappears off the chart
                frameRate: 100,    // data points are drawn 100 times every second
                onRefresh: chart => {  
                  
                  console.log(trocarP.data.datasets.data);
                  chart.config.data.datasets.forEach(function(dataset) {
                    chart.data.dataset[0].data.push({
                      x: Date.now(),
                      y: Math.random() //pressure16bits[pressure16bits.length-1]
                    });
                  });
                 
                }
              }
            }],
            yAxes: [{
              scaleLabel: {
                display: true,
                labelString: '[mmHg]', fontColor: boxWhiteColor, fontSize: 30, fontStyle: 900,
              },
              ticks: {
                fontColor: boxWhiteColor,
                fontSize: 25,
                fontStyle: 700,
                maxTicksLimit: 5,
                min: 0,
                max: 40,
              },
              gridLines: {display: true, drawBorder: true, color: boxWhiteColor, lineWidth: 5},
            }]
          },
          elements: { 
            point: {radius: 0},
          },
          legend: { display: false}
        }
    }
    trocarP = new Chart (pressure_graph, pressure_graph_config);

The problem is the graph is being created on a canvas via the .html file, but then it doesn’t display anything; trying to debug the code I found out that the console.log() I placed inside the onRefresh callback is not printing anything, so I’m assuming the callback isn’t working. Any clue on what’s happening?

Screenshot of the graph

Edit: I noticed that also Y axis label has not been displayed. I don’t get what’s wrong with this code.

Answer

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>