Looks like your isRebuildingCanvas logic might be inconsistent, or I don't just understand it.

Anyway, from the Chart.js perspective, you'd want to change the data and call chartInstance.update() when pressing the button that changes the data.

Partial example:

  const canvas = useRef(null);
  const [chart, setChart] = useState();
  const [timeFormat, setTimeFormat] = useState("24h");

  useEffect(() => {
    if (chart || !canvas.current) return;
    const ctx = canvas.current.getContext("2d");
    if (!ctx) return;

    const config = {/*...*/};

    setChart(new Chart(ctx, config));
  }, [chart, canvas]);

  useEffect(() => {
    if (!chart) return;[0].data = determineTimeFormat(timeFormat, day, week, year);
  }, [chart, timeFormat]);

And a complete, very similar example:

Related Query

More Query from same tag