[Chartjs]-What is the syntax for require.config for chartjs-plugin-streaming and dependencies using RequireJS?

by

3đź‘Ť

âś…

chartjs-plugin-streaming is looking for 'chart.js' as you can see in index.js in the GitHub source and below.

'use strict';

import Chart from 'chart.js';
import moment from 'moment';

import realTimeScale from './scales/scale.realtime';
import streamingPlugin from './plugins/plugin.streaming';

realTimeScale(Chart, moment);

var plugin = streamingPlugin(Chart);
Chart.plugins.register(plugin);
export default plugin;

Because it has the '.js' extension in the name for the import, you have to export something in your require.config with that name.

You need a RequireJS map so chartjs-plugin-streaming can find that file. Here’s the fixed require.config.

require.config({
  paths: {
    moment: "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min",
    chart: "//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min",
    streaming: "//cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.3.0/dist/chartjs-plugin-streaming.min"
  },
  shim: {
    chartjs: {
      exports: "C"
    },
    streaming: {
      exports: "C",
      deps: ["moment", "chart"]
    }
  },
  map: {
    streaming: {
      "chart.js": "chart"
    }
  }
});

require(["moment", "chart", "streaming"], function(moment, chart) {
  var ctx = document.getElementById("myChart").getContext('2d');
  var chrt = new chart.Chart(ctx, {
    type: "line",
    data: { datasets: [{ data: [1, 2, 3, 4, 5] }, { data: [-1, 0, 1, 2, 3] }] }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

1đź‘Ť

I know this is and old post, but I just managed to solve this by changing the define reference on the chartjs-plugin-datalabels.min.js, version 0.7.0 from define([“charts.js”]) to define([“path of my file”])

From (first two lines):

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define(["charts.js"],e) ...

to:

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("chart.js")):"function"==typeof define&&define.amd?define(["../charts/Chart.min.js"],e ...

Leave a comment