Chart JS displays data properly only on the second refresh of the page

[gregorsart]

On the first load, only two dogs are displayed, only upon refreshing five dogs are shown (which then is the same as the five dogs in the db)

Because of the issue we tried to implement useEffect.

Our code looks like this :)

import { useState, useEffect } from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";

import LoadingSpinner from "@/components/LoadingSpinner";
import Headline from "@/components/Headline";

export default function Statistics() {
  const { data, error, isLoading } = useSWR("/api/favorites");
  ChartJS.register(ArcElement, Tooltip, Legend);

  const [chartData, setChartData] = useState({
    labels: [],
    datasets: [
      {
        label: "# of Votes",
        data: [],
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
        ],
        borderColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
        ],
        borderWidth: 1,
      },
    ],
  });

  // const MyDoughnutChart = ({ newData }) => {
  //   const [chartData, setChartData] = useState({
  //     labels: ['Label 1', 'Label 2', 'Label 3'],
  //     datasets: [{
  //       data: [10, 20, 30], // Initial data
  //       backgroundColor: ['red', 'green', 'blue'],
  //     }],
  //   });

  useEffect(() => {
    // Update the data when newData changes
    setChartData((prevData) => ({
      ...prevData,
      datasets: [
        {
          ...prevData.datasets[0],
          data: data,
        },
      ],
    }));
  }, [data]);

  if (isLoading) {
    return <LoadingSpinner />;
  }
  if (!data) {
    return;
  }
  if (error) {
    return <h2>An error occurred...</h2>;
  }

  // Sort and Slice dogs data
  const dogsSortedByPoints = data
    ?.sort(function (a, b) {
      return b.value - a.value;
    })
    ?.splice(0, 5);

  // extract names as array of strings
  const dogNames = dogsSortedByPoints.map((dog) => dog.name);
  console.log("sorted", dogNames);

  return (
    <>
      <Headline>Statistics</Headline>
      {/* <p>{data.length} people have already taken the quiz before you!</p> */}
      <p>{data.length} dogs are listed as most favorited.</p>
      <Doughnut data={chartData} />
    </>
  );
}

We think the data does not arrive in sync and that is why there is a delay in displaying ... but we do not know how to solve this ...

Help -- as always -- appreciated!

[onemanwenttomow]

I have not done much work with Chartjs but i get the feeling we don't need a useEffect to manage this.

If we only create the chartData object after we are sure we have the data (i.e. after the if(!data) check) then i think we are good to go.

I put together a brief demo using a space api (i.e. fetch data with useswr and then pass it into the Doughnut component) and it seems to work ok.

import React from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
import useSWR from "swr";

ChartJS.register(ArcElement, Tooltip, Legend);

const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function CustomChart() {
  const { data, error, isLoading } = useSWR(
    "https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY",
    fetcher
  );

  if (error) return <div>failed to load</div>;
  if (isLoading) return <div>loading...</div>;
  const spaceObjectNames = data.near_earth_objects.map(
    (object) => object.name_limited
  );
  const spaceObjectDiameters = data.near_earth_objects.map(
    (object) => object.estimated_diameter.kilometers.estimated_diameter_max
  );

  const chartData = {
    labels: spaceObjectNames.slice(0, 5),
    datasets: [
      {
        label: "Diameter in km",
        data: spaceObjectDiameters.slice(0, 5),
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)",
        ],
        borderColor: [
          "rgba(255, 99, 132, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)",
        ],
        borderWidth: 1,
      },
    ],
  };

  return <Doughnut data={chartData} />;
}

[gregorsart]

Hi Pete,
ty very much for the fast response. We will implement your solution on monday.
Greetings and have a nice weekend

Gregor

[gregorsart]

Good morning @onemanwenttomow we implemented your approach, but still the same issue.
The data arrives only after the second refresh of the browser.

We have the assumption, that this has to do with react and asynchronous things.
With swr we fetch from the backend and the backend fetches from the mongo db database.

In the screenshot, there is a number 2 -- this is the raw data as a prop inserted in the return area of the page.

This is unusual, because in the database we currently have 7 dogs.

By the way, we deactivated react strict mode because we got duplicates of dogs in our mongo db.

PS: We solved the chart.js display issue on second refresh by doing a hard refresh in the browser.
Seems like there was something cached!

[onemanwenttomow]

So having just spoken with the group in person it turns out there were 2 issues.

1. The cache needed to be emptied.
2. There was a use of splice (which mutates) rather than slice (which creates a copy) that was also causing an issue.

The demo above works (in that there is no need to use useEffect to sync up states).