ngx-charts - Horizontal Bar Charts bar thickness changes on data update

Question

I'm using Angular and ngx-charts to show some data that is pulled from the server.
On first load, when the ngOnInit() method triggers the request to the server (getStats()), everything is loaded as it should:

But when the Get Data button is clicked, and the same request is sent to the server(getStats()), the table is re-rendered like this:

The bar lines get thinned out.

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 Code:

    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);
    });
  }```

Answer 1

The problem was the ngx-charts barPadding parameter. After setting it to a fixed value, the thickness of the bars remained the same on every request.

To fix the problem add: [barPadding]="1" to the html <ngx-charts-bar-horizontal> element.