How to render the coinbase API in stream line chartjs

Question

Question: I am trying to render the level2 api in the chartjs. But unable to do it

I have kep the data in 2 variable bid, ask and trying to plot them against time.

code sandbox https://codesandbox.io/p/sandbox/dazzling-neumann-qjw7yv

API: https://docs.cdp.coinbase.com/exchange/docs/websocket-channels/#level2-channel

CODE

    options={{
        scales: {
          x: {
            type: "realtime",
            realtime: {
              onRefresh: (chart) => {
                bids.forEach((bid) => {
                  chart.data.datasets[0].data.push({
                    x: bid.time,
                    y: bid.price,
                  });
                });

                asks.forEach((ask) => {
                  chart.data.datasets[1].data.push({
                    x: ask.time,
                    y: ask.price,
                  });
                });
              },
            },
          },
        },
      }}

• options to see the streamline data (https://nagix.github.io/chartjs-plugin-streaming/master/guide/data-feed-models.html#pull-model-polling-based-synchronous).
• ask and bids are the data received from web socket connection (https://docs.cdp.coinbase.com/exchange/docs/websocket-overview/)

Answer 1

After a little time spent on it, here is what I managed to do.

First, you create a table which will be populated with each new bid or ask, all via useEffect.

const { bids, asks } = useWebSocket();
const [chartData, setChartData] = useState({ datasets: [] });

const [newBid, setnewBid] = useState([]);
const [newAsk, setnewAsk] = useState([]);

useEffect(() => {
  bids.map((bid) => {
    setnewBid([...newBid, { x: bid.time, y: bid.price }]);
  });
}, [bids]);

useEffect(() => {
  asks.map((ask) => {
    setnewAsk([...newAsk, { x: ask.time, y: ask.price }]);
  });
}, [asks]);

Second, you define your options.

const options = {
  scales: {
    y: {
      display: true,
      type: "linear",
      position: "left",
      suggestedMin: 0.245,
      suggestedMax: 0.26,
    },
    x: {
      display: true,
      type: "realtime",
    },
  },
};

Third, you define your datasets.

const datasets = {
  datasets: [
    {
      label: "Bids",
      backgroundColor: "rgba(255, 99, 132, 0.5)",
      borderColor: "rgb(255, 99, 132)",
      fill: true,
      data: newBid,
    },
    {
      label: "Asks",
      backgroundColor: "rgba(54, 162, 235, 0.5)",
      borderColor: "rgb(54, 162, 235)",
      cubicInterpolationMode: "monotone",
      fill: true,
      data: newAsk,
    },
  ],
};

Finally you import everything into your graph.

return <Line data={datasets} options={options} />;

Thanks to this code, the two lines are displayed correctly, without the axes reacting strangely, and over time. The curves are not necessarily very beautiful, but it's an adjustment to see afterwards.

https://codesandbox.io/p/sandbox/line-graph-zlrw2t