Issues with react-chartjs-2

Question

I have issue with react-chartjs-2 and chartjs-plugin-streaming, my goal was to create a live graph with stream, but it ends up in error and I don't quite know why. Anyhow, my imports are like this:

import { Chart, Bubble } from 'react-chartjs-2';
import ChartStream from 'chartjs-plugin-streaming';

Then right below that is this part:

Chart.pluginService.register(ChartStream);

and then theres's this part in component render

<Bubble
    data={{
        labels: ['demo'],
        datasets: [{
            backgroundColor: 'rgba(75,192,192,1)',
            data: []
        }]
    }}
    options={{
    plugins: {
        streaming: {
            onRefresh: function(chart) {
                chart.data.datasets[0].data.push({
                    x: Date.now(),
                    y: Math.random() * 100,
                    r: 5
                });
            },
            delay: 500,
            refresh: 1000,
            frameRate: 30,
            duration: 3600000 // 3600000 = 1hour
        }
    },
    scales: {
        xAxes: [{
            type: 'realtime',
            id: 'x-axis-0'
        }]
    }
}}
/>

first error that happens right on navigation is this:

Uncaught TypeError: Cannot set property 'options' of undefined at core.controller.js:51 at Array.forEach () at n (core.controller.js:50) at e.update (core.controller.js:340) at e.construct (core.controller.js:121) at new e (core.js:7) at t.renderChart (index.js:228) at t.componentDidMount (index.js:53) at e.notifyAll (CallbackQueue.js:76) at r.close (ReactReconcileTransaction.js:80) because in core.controller.js of chartjs is this part:

function updateConfig(chart) {
        var newOptions = chart.options;

        // Update Scale(s) with options
        if (newOptions.scale) {
            chart.scale.options = newOptions.scale;
        } else if (newOptions.scales) {
            newOptions.scales.xAxes.concat(newOptions.scales.yAxes).forEach(function(scaleOptions) {
                chart.scales[scaleOptions.id].options = scaleOptions;
            });
        }

        // Tooltip
        chart.tooltip._options = newOptions.tooltips;
    }

the part that fails is this:

chart.scales[scaleOptions.id].options = scaleOptions;

and it's caused by these options I set before, upon debugging there is no x-axis-0 in chart.scales, only y-axis-0

scales: {
    xAxes: [{
        type: 'realtime',
        id: 'x-axis-0'
    }]
}

Anyone know how to work around this issue?

Answer 1

The problem seems that when a chart instance is constructed, the 'realtime' scale is not registered yet, and chart.scales['x-axis-0'] is left undefined . Please make sure the chartjs-plugin-streaming is imported before a chart is constructed.

By the way, you don't need to register the plugin object to the pluginService explicitly. It is done with import 'chartjs-plugin-streaming' . Try this working sample:

import React from 'react';
import ReactDOM from 'react-dom';
import { Bubble } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';

ReactDOM.render(
    <Bubble
        data={{
            datasets: [{
                label: 'demo',
                backgroundColor: 'rgba(75,192,192,1)',
                data: []
            }]
        }}
        options={{
            plugins: {
                streaming: {
                    onRefresh: function(chart) {
                        chart.data.datasets[0].data.push({
                            x: Date.now(),
                            y: Math.random() * 100,
                            r: 5
                        });
                    },
                    delay: 500,
                    refresh: 1000,
                    frameRate: 30,
                    duration: 3600000 // 3600000 = 1hour
                }
            },
            scales: {
                xAxes: [{
                    type: 'realtime'
                }]
            }
        }}
    />
, document.getElementById('root'));