1👍
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;
chart.config.data.datasets[0].data = determineTimeFormat(timeFormat, day, week, year);
chart.update();
}, [chart, timeFormat]);
And a complete, very similar example:
https://codesandbox.io/s/blissful-faraday-hzcq0
- [Chartjs]-How can I show dotted gridLines with ChartJS?
- [Chartjs]-Create a rounded bar graph with Angular and chartJS
Source:stackexchange.com