6

I'm trying this example of reactjs Streaming chart https://nagix.github.io/chartjs-plugin-streaming/latest/tutorials/react/app.html

but I can't seems to make it work, it compile without problem but dosnt show anything in the browser, and when I check the browser console it has error message that says:

App.js:7 Uncaught TypeError: react_chartjs_2__WEBPACK_IMPORTED_MODULE_5__.Chart.register is not a function
    at Module../src/App.js (App.js:7:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/index.js (App.js:46:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1
./src/App.js    @   App.js:7
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:24
fn  @   hot module replacement:61
./src/index.js  @   App.js:46
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:24
(anonymous) @   startup:7
(anonymous) @   startup:7

I tried Chart.plugins.register(StreamingPlugin), then the error message is:

App.js:7 Uncaught TypeError: Cannot read properties of undefined (reading 'register')
    at Module../src/App.js (App.js:7:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/index.js (App.js:46:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1
./src/App.js    @   App.js:7
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:24
fn  @   hot module replacement:61
./src/index.js  @   App.js:46
options.factory @   react refresh:6
__webpack_require__ @   bootstrap:24
(anonymous) @   startup:7
(anonymous) @   startup:7
GhaDa MJT
  • 61
  • 1
  • 2

3 Answers3

3

You need to import Chart from chart.js and not from Reacht-chartjs-2 to register it like so:

import {Chart} from 'chart.js';
import {Chart as ReactChart} from 'react-chartjs-2';
import StreamingPlugin from 'chartjs-plugin-streaming';

Chart.register(StreamingPlugin);
LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • I import it from Chart.js but it still get this error. Note: I am using chart.js and react-chart-2 of v2.8.0 – Raju Ahammad Aug 26 '22 at 05:10
  • 2
    If you are using V2 you need to `import Chart from 'chart.js'` and then `Chart.pluginService.register()` if I'm not mistaken, otherwise please add a reproducble – LeeLenalee Aug 26 '22 at 05:49
0

Hi I found the answer because i had the same problem.

remove Chart from import react-chartjs-2 and import Chart from chart.js/auto so your imports would look like this.

import { Line } from "react-chartjs-2";
import "chartjs-adapter-luxon";
import StreamingPlugin from "chartjs-plugin-streaming";
import "./App.css";
import Chart from "chart.js/auto";

Chart.register(StreamingPlugin);```

Hope this helped.
chrismogab
  • 11
  • 1
-1

What worked for me was using chart.js@3.8.0, chartjs-chart-geo@3.7.2, and react-chartjs-2@4.1.0. Like in this codepen.

Liz
  • 351
  • 3
  • 9