I'm creating a chart using D3FC on Next JS. I'm using TRPC for APIs. This chart contains multiple series on a single cartesian. It will have Area, Lines and Bars plotted. I will need to fetch all these data from various APIs. For instance, I'm getting data for a line plot from an API another API is returning data for the Area series and there is another API for the bar series.
So I will need to combine all those data based on their timestamp and plot on a chart. These data will be in millions, at least a million. Also, it will be financial charts having data about a minute's or second's interval.
How to combine all these data into one and what should be the mechanism or architecture for it? I wanted to have a decent performance but can't get an idea of how to achieve this with performance or what will impact in future if data grows.
Can anyone suggest architecture and possible solutions to achieve this? Also, I'm worried about how to manage data for zoom in and out.