Как исправить динамическое c обновление jqxChart, не работающее в Firefox?

Question

Я использую jqxChart в моем Angular приложении. Проблема в том, что он отлично работает в Chrome. Но в Firefox это не работает, когда я предоставляю данные из сервисного вызова, который занимает некоторое время, чтобы прибыть. Каждый раз я получаю эту ошибку в Firefox при предоставлении динамических c данных.

Вот код состояния c данные:

Компонент. html:

<jqxChart #myChart [width]="getWidth()" [height]="500" [title]="title"
          [description]="description" [enableAnimations]="true" [padding]="padding" [titlePadding]="titlePadding"
          [source]="chartData" [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups"
          [colorScheme]="'scheme17'" [enableCrosshairs]="true">
</jqxChart>

Component.ts :

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { jqxChartComponent } from 'jqwidgets-ng/jqxchart';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit
{

  source: any;
  dataAdapter: any;
  @ViewChild('myChart') myChart: jqxChartComponent;

  constructor()
  {

    this.initializeChartData();

  }


  getWidth(): any
  {
    if (document.body.offsetWidth < 850) {
      return '90%';
    }

    return 850;
  }
  padding: any = { left: 5, top: 5, right: 30, bottom: 5 };
  titlePadding: any = { left: 30, top: 5, right: 0, bottom: 10 };
  xAxis: any;
  valueAxis: any;
  seriesGroups: Array<any> = [];
  chartData: Array<any> = [];
  title: string = '';
  description: string = '';
  seriesTemp: Array<any> = [];
  sampleData: Array<any> = [];

  ngOnInit()
  {
  }
  
  initializeChartData(): any
  {
    try {
      let yAxisTitle: string;
      let rangeSelector: string;
      let maxQuantity: number;
      let unitInterval: number;

      this.chartData = [
        { day: '1-Jan-20', totalFruitsCount: 55, eatenFruitsCount: 30, rottenFruitsCount: 0, dryFruitsCount: 25 },
        { day: '2-Jan-20', totalFruitsCount: 50, eatenFruitsCount: 25, rottenFruitsCount: 25, dryFruitsCount: 0 },
        { day: '3-Jan-20', totalFruitsCount: 55, eatenFruitsCount: 30, rottenFruitsCount: 0, dryFruitsCount: 25 },
        { day: '4-Jan-20', totalFruitsCount: 105, eatenFruitsCount: 35, rottenFruitsCount: 25, dryFruitsCount: 45 },
        { day: '5-Jan-20', totalFruitsCount: 45, eatenFruitsCount: 0, rottenFruitsCount: 20, dryFruitsCount: 25 },
        { day: '6-Jan-20', totalFruitsCount: 60, eatenFruitsCount: 30, rottenFruitsCount: 0, dryFruitsCount: 30 },
        { day: '7-Jan-20', totalFruitsCount: 105, eatenFruitsCount: 60, rottenFruitsCount: 45, dryFruitsCount: 0 },
        { day: '8-Jan-20', totalFruitsCount: 55, eatenFruitsCount: 30, rottenFruitsCount: 0, dryFruitsCount: 25 },
        { day: '9-Jan-20', totalFruitsCount: 50, eatenFruitsCount: 25, rottenFruitsCount: 25, dryFruitsCount: 0 },
        { day: '10-Jan-20', totalFruitsCount: 55, eatenFruitsCount: 30, rottenFruitsCount: 0, dryFruitsCount: 25 },
        { day: '11-Jan-20', totalFruitsCount: 105, eatenFruitsCount: 35, rottenFruitsCount: 25, dryFruitsCount: 45 },
        { day: '12-Jan-20', totalFruitsCount: 45, eatenFruitsCount: 0, rottenFruitsCount: 20, dryFruitsCount: 25 },
        { day: '13-Jan-20', totalFruitsCount: 60, eatenFruitsCount: 30, rottenFruitsCount: 0, dryFruitsCount: 30 },
        { day: '14-Jan-20', totalFruitsCount: 105, eatenFruitsCount: 60, rottenFruitsCount: 45, dryFruitsCount: 0 },
      ];

      this.title = "Status";
      this.description = "";
      rangeSelector = 'totalFruitsCount';
      yAxisTitle = "Number of Fruits";
     
      maxQuantity = 115;
    
      this.seriesTemp = [
        { dataField: 'eatenFruitsCount', displayText: 'eaten', enableSeriesToggle: true },
        { dataField: 'rottenFruitsCount', displayText: 'rotten', enableSeriesToggle: true },
        { dataField: 'dryFruitsCount', displayText: 'dry', enableSeriesToggle: true }
      ];

      this.seriesGroups =
        [
          {
            type: 'stackedcolumn',
            columnsGapPercent: 50,
            seriesGapPercent: 0,
            series: this.seriesTemp
          },
        ];
      
      this.xAxis =
      {
        dataField: 'day',
        axisSize: 'auto',
        baseUnit: 'day',
        tickMarks: {
          visible: true,
          interval: 1,
          color: '#BCBCBC'
        },
        gridLines: {
          visible: true,
          interval: 1,
          color: '#BCBCBC'
        },
        rangeSelector: {
          serieType: 'area',
          padding: { top: 10, bottom: 0 },
          backgroundColor: 'white',
          dataField: rangeSelector,
          size: 157,
          gridLines: { visible: false },
          labels:
          {
            angle: -89,
            rotationPoint: 'topright',
            offset: { x: 0, y: -25 }
          },
        }
      };
      if (maxQuantity < 5)
        unitInterval = 1;
      if (maxQuantity > 5 && maxQuantity < 10)
        unitInterval = 2;
      if (maxQuantity >= 10 && maxQuantity < 20)
        unitInterval = 2;
      if (maxQuantity >= 20 && maxQuantity < 30)
        unitInterval = 3;
      if (maxQuantity >= 30 && maxQuantity < 40)
        unitInterval = 4;

      this.valueAxis =
      {
        unitInterval: unitInterval,
        minValue: 0,
        maxValue: maxQuantity + 5,
        title: { text: yAxisTitle },
        labels: { horizontalAlignment: 'right' },
        tickMarks: { color: '#BCBCBC' }
      };

    } catch (error) {
      throw new Error("ReportsComponent::initializeChartData() Exception : " + error);
    }
  }

}

Когда я инициализирую данные диаграммы из конструктора, она отлично работает в Firefox. Но всякий раз, когда происходит задержка в инициализации данных диаграммы (после извлечения их из сервиса), я получаю ошибку, показанную на рисунке. Итак, кто-нибудь может помочь и сообщить мне, какую ошибку я здесь делаю и как ее можно устранить?