I am quite new to design software and especially graphs. So I am working on a full-stack app with a back-end built on FastAPI (python) et front-end on React.
I need to create 4 graphs on a single page on my React app. Each graph is a time-series graph (simple) but with 3 millions data points (every 3 seconds since a couple of years) with 2 others data points (weather and humidity). They are currently on 4 PSQL tables but probably migration to timescaleDB on the long-run.
Note that the user can only watch graph (zoom) but this is read-only.
I never worked with graph before and such large amount of data, and I am wondering:
How should I built my endpoints? Should I send 3 millions data-points on each fetch call?
I was thinking about something but I have no idea if it's a good practice or it would make things worst:
Each graph must be displayed completely by default (full year, so 30 millions data points because I have data every 3 seconds). So when there is no zoom on a specific period, I could just display less data point (use intervals) and have an API that like only fetch 1 point per day so instead of fetching 30 millions pointsby default, I would have 365 points. But in this case, if the user zoom, I guess things will get a bit more complex.