Chartjs-Chart.js 4 x-axis scroll with live updating graph

0👍

The solution was to use Streaming Plugin and Zoom Plugin

var myLiveChart = new Chart(ctx,{
  type: 'line',
  data: startingData,
  options: {
        scales: {
            x: {
                type: 'realtime',   // x axis will auto-scroll from right to left
                realtime: {         // per-axis options
                  duration: 10000,  // data in the past 20000 ms will be displayed
                  refresh: 500,    // onRefresh callback will be called every 1000 ms
                  delay: 10,      // delay of 1000 ms, so upcoming values are known before plotting a line
                  pause: false,     // chart is not paused
                  ttl: 60000,   // data will be automatically deleted as it disappears off the chart
                  frameRate: 30,    // data points are drawn 30 times every second

                  // a callback to update datasets
                  onRefresh: chart => {

                        let m1 = pick_counter_m1()

                        m1.then(function(result) {
                                 // query your data source and get the array of {x: timestamp, y: value} objects

                                chart.data.datasets[0].data.push(
                                {
                                x: Date.now(),
                                y: result
                              });

                        })

                        
                  }
              }
            },
            y: {
                type: 'linear',
                min: 0,
                max: 2100
            }
        },
        plugins: {
          zoom: {
            // Assume x axis has the realtime scale
            zoom: {
              pinch: {
                enabled: true       // Enable pinch zooming
              },
              wheel: {
                enabled: true       // Enable wheel zooming
              },
              mode: 'x'             // Allow zooming in the x direction
            }
          }
        }
    }
});

Leave a comment