Chartjs-Real time scrolling based chart with chart.js

by

0👍

Easyest way to achieve this is by using the streaming plugin for chart.js:
https://nagix.github.io/chartjs-plugin-streaming/master/guide/#table-of-contents

You will get something like this where in your onRefresh you add your data.

npm i chartjs-plugin-streaming

import ChartStreaming from 'chartjs-plugin-streaming';
import 'anyDatAdapterFromAhichDateLibYouAreUsing';

Chart.register(ChartStreaming);

const myChart = new Chart(ctx, {
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          onRefresh: function(chart) {
            chart.data.datasets.forEach(function(dataset) {
              dataset.data.push({
                x: Date.now(),
                y: Math.random()
              });
            });
          }
        }
      }
    }
  }
});

Leave a comment