Chartjs-plugin-streaming

lastmod 2021-10-08created 2021-09-257 edits

Chart.js plugin for live streaming data

Gettings started

Installation:

yarn add chartjs-plugin-streaming

You need to add a date adapter. Pick one of the following three and yarn add {plugin} it yourself:

• chartjs-adapter-date-fns (date-fns)
• chartjs-adapter-luxon (luxon)
• chartjs-adapter-moment (moment)

Import as follows:

import {Chart} from 'chart.js';
import 'chartjs-adapter-luxon';
import ChartStreaming from 'chartjs-plugin-streaming';

Chart.register(ChartStreaming);

Pause

• How to trigger the pause? #32

chart.options.plugins.streaming.pause = true;
chart.update();

Configuration

Can be configured in the three ways below. They are evaluated in order of priority.

1. per axis: options.scales[scaleId].realtime.*
2. per chart: options.plugins.streaming.*
3. globally: Chart.defaults.plugins.streaming.*

For example:

// Change default options for ALL charts
Chart.defaults.set('plugins.streaming', {
  duration: 20000
});

const chart = new Chart(ctx, {
  options: {
    plugins: {
      // Change options for ALL axes of THIS CHART
      streaming: {
        duration: 20000
      }
    },
    scales: {
      x: {
        type: 'realtime',
        // Change options only for THIS AXIS
        realtime: {
          duration: 20000
        }
      }
    }
  }
});

Checking the internal buffer

  onRefresh(chart: Chart) {
    for (const item of this.items) {
      const name = item.name.toString();
      const uid = item.uid.toString();
      const label = name ? name : uid;
      const value = this.getSensorValue(item);
      const data = {x: Date.now(), y: value};

      const dataset = chart.data.datasets.find(dataset => dataset.label == label);
      if (typeof dataset !== 'undefined') {
        dataset.data.push(data);
        console.log(`${label} dataset length: ${dataset.data.length}`);
      }
    }
  }

Checking dataset.data.length in onRefresh shows it stays fixed at only 13-14 items... so it's fine to keep pushing.

See also

• Chart.js

Favorite site

• chartjs-plugin-streaming web site