I have a firestore database where it gets new documents every second from another gcp service, I'm using that data to plot a line chart in front end angular12 app. the problem I have is the front end is getting the whole database documents which it fills the chart with over 1000 data, I tried to use ref.limit but then I don't get the latest document and the chart keeps showing the same 10 objects. has anyone faced the same problem and what would be the best approach?

in service.ts

export class ChartsService {
  
    private itemsCollection: AngularFirestoreCollection<Item>;
    items: Observable<Item[]>;  

    constructor(private afs: AngularFirestore) {
      this.itemsCollection = afs.collection<Item>('DCI2');
      this.items = this.itemsCollection.valueChanges();
    } 

componant.ts

ngOnInit(): void {

    this.ChartsService.getDocs().subscribe((data) => {
          this.items$ = data;
         
          if (this.items$) {
            this.items$.forEach((element) => {
              this.timestamp.push(element.timestamp);
              this.temp1.push(element.temp1); 
              this.temp2.push(element.temp2)      
            });

            console.log(this.temp1);
 
          }
        });
    }