chartjs-plugin-streaming

# Getting Started

# Installation

# npm

npm (opens new window) npm downloads (opens new window)

npm install chartjs-plugin-streaming --save

TIP

This plugin can also be installed using Bower (opens new window).

# CDN

jsdelivr (opens new window) jsdelivr hits (opens new window)

By default, https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming returns the latest (minified) version, however it's highly recommended (opens new window) to always specify a version in order to avoid breaking changes. This can be achieved by appending @{version} to the url:

https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0    // exact version
https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2        // latest 2.x.x

Read more about jsDeliver versioning on their website (opens new window).

# Download

github (opens new window) github downloads (opens new window)

You can download the latest version of chartjs-plugin-streaming from the GitHub Releases (opens new window):

  • chartjs-plugin-streaming.js (recommended for development)
  • chartjs-plugin-streaming.min.js (recommended for production)
  • chartjs-plugin-streaming.esm.js
  • chartjs-plugin-streaming.tgz (contains all builds)
  • chartjs-plugin-streaming.zip (contains all builds)

# Integration

# HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@1.27.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0"></script>

IMPORTANT

chartjs-plugin-streaming must be loaded after the Chart.js, a date library and a corresponding adapter!

This plugin requires both a date library and a corresponding adapter to be present. Luxon (opens new window) is used in the example above, but you can choose from the available adapters (opens new window).

Registration is not needed in case of using script tags.

# Module

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

Once imported, the plugin needs to be registered globally.

IMPORTANT

chartjs-plugin-streaming does not function as an inline plugin. See also Chart.js › Using plugins (opens new window).

# Configuration

The plugin options can be changed at 3 different levels and are evaluated with the following priority:

  • per axis: options.scales[scaleId].realtime.*
  • per chart: options.plugins.streaming.*
  • 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
        }
      }
    }
  }
});

← Options →