Streaming Real-time data with react and chartjs-plugin-streaming paused

Question

When passed like this

Error: "realtime" is not a registered scale

Refresh function:

onRefresh=(chart) =>{
        var now = Date.now();
         chart.data.datasets[0].data.push({
            x: now,
            y: this.state.realdata.sitting
          });
      }

Component:

                <Line
                  data={{
                    datasets: [
                      {
                        label: "Customers",
                        borderColor: "rgb(54,162, 235)",
                        backgroundColor: "rgba(54,162, 235, 0.5)",
                        lineTension: 0,
                        borderDash: [8, 4],
                        data: this.state.livePeopleSitting,
                      },
                    ],
                  }}
                  options={{
                    scales: {
                      x: {
                          type: "realtime",
                          realtime: {
                            onRefresh: this.onRefresh,
                            delay: 4000,
                            duration: 160000,
                            refresh: 3000,
                          },
                        },
                      y: {
                        title: {
                          display: true,
                          text: "people seated",
                        },
                      },
                    },
                  }}
                />

After passing scales as

x: [{
...
}]

instead of

x: {
...
}

I stops getting an error, but it doesn't show the x axis at all, although object form is the latest chart.js 3.0.0

Answer 1

The reason chart.js doesn't throw an error anymore with array is because chart.js ignores those options.

As stated in the documentation here you will need to import and register everything you use. By default react chartjs import and registers everything from chart.js itself but it can't auto register any plugin things since it doesn't know you are using them.

So to solve the issue you will also need to register the scale like so: import { StreamingPlugin, RealtimeScale } from 'chartjs-plugin-streaming';. After that you can register it like so: Chart.register(StreamingPlugin, RealtimeScale);