angular - ngx-charts - Horisontella stapeldiagram stapeltjocklek ändras vid datauppdatering

Jag använder Angular och ngx-charts för att visa viss data som hämtas från servern.
Vid första laddningen, när ngOnInit()-metoden utlöser begäran till servern (getStats()), laddas allt som det ska:

Men när Hämta data-knappen klickas och samma förfrågan skickas till servern (getStats()), återrenderas tabellen så här:

Strecklinjerna blir tunnare.

Html :

<div class="row shadow">
    <div class="col" style="height: 80vh; width: 100%;"> 
        <ngx-charts-bar-horizontal
            [scheme]="colorScheme"
            [results]="data"
            [gradient]="gradient"
            [xAxis]="showXAxis"
            [yAxis]="showYAxis"
            [legend]="showLegend"
            [showXAxisLabel]="showXAxisLabel"
            [showYAxisLabel]="showYAxisLabel"
            [xAxisLabel]="xAxisLabel"
            [yAxisLabel]="yAxisLabel"
            (select)="onSelect($event)">
        </ngx-charts-bar-horizontal>                                
    </div>
</div>

TS-kod:

    export class StatsComponent implements OnInit {

  constructor(
    private adminService: AdminService,
    private toastr: ToastrService,
    private datePipe: DatePipe,
    private formBulder: FormBuilder,
    private changeDetection: ChangeDetectorRef ) { }

    days = 7; // Days you want to subtract
    date = new Date();
    endMonth = this.date.getUTCMonth() + 1; //months from 1-12
    endDay = this.date.getUTCDate();
    endyear = this.date.getUTCFullYear();
    endDate = this.endyear + '/' + this.endMonth + '/' + this.endDay;
    last = new Date(this.date.getTime() - (this.days * 24 * 60 * 60 * 1000));
    startDay = this.last.getDate();
    startMonth= this.last.getMonth()+1;
    startYear = this.last.getFullYear();
    startDate = this.startYear + '/' + this.startMonth + '/' + this.startDay;

  statsSearchFrom = this.formBulder.group({
    startTime: [this.startDate, Validators.required],
    endTime: [this.endDate, Validators.required]
  });

  agents: User[];
  data: any[] = [];
  multi: any[];
  // view: any[] = [100%, 800];
  // bar chart options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Number of Tickets';
  showYAxisLabel = true;
  yAxisLabel = 'Agent';

  colorScheme = {
    domain: ['#263859', '#a7d129', '#21e6c1', '#278ea5', '#7045af', '#e14594', '#ed6363', '#3c6562']
  };

  ngOnInit() {
    this.getAllAgents();
  }

  getStats() {
    const startTime = this.datePipe.transform(this.statsSearchFrom.controls['startTime'].value, 'ddMMyyyy');
    const endTime = this.datePipe.transform(this.statsSearchFrom.controls['endTime'].value, 'ddMMyyyy');
    this.adminService.getAgentStats(this.agents, startTime, endTime).subscribe(response => {
      this.agents = response;
      for (const agent of this.agents) {
        const point: any = {'name': agent.username, 'value': agent.nbOfClosedEmails};
        this.data.push(point);
      }
      this.data = [...this.data];
    }, error => {
      this.toastr.error('Error while getting the statistics.')
    });
  }

  getAllAgents() {
    this.adminService.getAllAgents().subscribe(response => {
      this.agents = response;
      this.agents = [...this.agents];
      this.getStats();
    }, error => {
      this.toastr.error('Error while getting the agents.');
      console.error(error);
    });
  }```

Svar #1

Problemet var parametern ngx-charts barPadding. Efter att ha ställt in den på ett fast värde förblev tjockleken på staplarna densamma vid varje förfrågan.

För att åtgärda problemet, lägg till: [barPadding]="1" till HTML <ngx-charts-bar-horizontal>-elementet.