How to reduce the number of points showing up in the time series trend chart

[coarse tulip]

I have an Angular application as UI which generates Time series trend chart using Chart.js. The trend chart is a separate component and data is inserted into chart from a different component.

Problem:
When the UI gets loaded, the trend chart takes time to load up and also slows down the as one month of data is shown in a single trend chart.

Possible way of solving:
One way, I'm thinking is to show only 1 or 2 weeks of data in the trend chart the use pan to get other days of month data.

Help needed:
Implementing the above situation is where I'm stuck at. When I try to implement the pan functionality it works on the y axis and not on the x-axis, maybe I do need to write some functions to get other days of month data while panning left or right.

[gray plinth]

@coarse tulip What is your qustion exactly?

Also, you should provide more info to your question:

• What code did you write that is not working?
• What do you mean by "the trend chart takes time to load up"? How much data are you reciving? What's taking so long, fetching or generating the graph?

[coarse tulip]

@gray plinth https://pastes.dev/Fw6kjgHon1 : This is the code for trend-chart component.ts . Generating the graph creates lot of points atleast 8640 points and this afffects the UI and the console shows [Violation] Handler took 740ms of runtime