Error: <g> attribute transform: Expected number, "translate(NaN, 0) scale(1)". Apexchart

Question

I am using Angular apex chart to show some charts on a project. While rendering my chart the first time, I am getting the following error:

my chart options in my component looks like

 this.chartOptions = {
      series: this.getSeriesOverallValue(dataBtc, dataEth, dataUsdt, dataLtc, dataDoge, dataBch, dataDfi),
      colors: this.getColorsOverallValue(dataBtc, dataEth, dataUsdt, dataLtc, dataDoge, dataBch, dataDfi),
      labels: this.getLabelsOverallValue(dataBtc, allValue, dataEth, dataUsdt, dataLtc, dataDoge, dataBch, dataDfi),
      chart: {
        width: '100%',
        type: 'donut',
        background: 'transparent'
      },
      dataLabels: {
        enabled: true
      },
      fill: {
        type: 'gradient'
      },
      legend: {
        // tslint:disable-next-line:only-arrow-functions typedef
        formatter(val, opts) {
          return '55';
        }
      },
      responsive: [
        {
          breakpoint: 480,
          options: {
            chart: {
              width: '100%'
            },
            legend: {
              position: 'bottom'
            }
          }
        }
      ]
    };

and I am using it in my HTML content like:

<apx-chart *ngIf="chartOptions && chartOptions.series.length > 0"
  class="w-full"
  [series]="chartOptions?.series"
  [chart]="chartOptions?.chart"
  [labels]="chartOptions?.labels"
  [colors]="chartOptions?.colors"
  [fill]="chartOptions?.fill"
  [dataLabels]="chartOptions?.dataLabels"
  [responsive]="chartOptions?.responsive"
></apx-chart>

Answer 1

Opened a pr https://github.com/Shelkovenkov/defichain-income/pull/5

The problem is that you're bootstrapping your application twice.
I'm sure you want to have only one version of this code in src/main.ts and remove it from src/app/app.module.ts.