CODEWITHSUNDEEP
reactjschart.js
kim tech
kim tech

Reputation: 91

How can I make streaming chart with react?

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;
`;

Upvotes: 1

Views: 356

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31351

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,
},

Upvotes: 1

Related Questions