[Chartjs]-Issues with react-chartjs-2

by

0👍

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'));

Leave a comment