How can I make streaming chart with react?

Question

Currently, I'm trying to use chart.js streaming for my website. However, I tried to make that with searching but data is not changing, the below is what I tried to do for it.

Here is my code:

import "chartjs-plugin-streaming";
import React from "react";
import { Bar } from "react-chartjs-2";
import styled from "styled-components";

const Home = () => {
  const data = {
    datasets: [
      {
        label: "Dataset 1",
        borderColor: "rgb(255, 99, 132)",
        backgroundColor: "rgba(255, 99, 132, 0.5)",
        lineTension: 0,
        borderDash: [8, 4],
        data: [],
      },
    ],
  };

  const options = {
    scales: {
      xAxes: [
        {
          type: "realtime",
          realtime: {
            onRefresh: function () {
              data.datasets[0].data.push({
                x: Date.now(),
                y: Math.random() * 100,
              });
            },
            delay: 2000,
          },
        },
      ],
    },
  };

  console.log(options);
  return (
    <Main>
      <Bar data={data} options={options} />
    </Main>
  );
};

export default Home;
const Main = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20vw;
  margin-top: 15vh;
  width: 70vw;
  height: 70vh;
`;

data looks to be redeclared each time the Home component renders. Is this the issue? Is anything triggering the UI to update/rerender with new data? — Drew Reese
– Drew Reese, Commented Oct 7, 2021 at 0:36
Thank you so much for answering Sir, no not at all, that is my whole code . — kim tech
– kim tech, Commented Oct 7, 2021 at 0:41

LeeLenalee · Accepted Answer · 2021-10-07 00:38:56Z

1

You need to update the data in the argument you get in the onRefresh function like so:

realtime: {
  onRefresh: function(chart) {
    chart.data.datasets[0].data.push({
      x: Date.now(),
      y: Math.random() * 100,
    });
  },
  delay: 2000,
},

answered Oct 7, 2021 at 0:38

LeeLenalee

31.9k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I make streaming chart with react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related