ng2-charts and chart.js Error 0x80004005 (NS_ERROR_FAILURE) computeLabelSizes only in Firefox

Issue

In an Angular/Ionic project, I am totally bamboozled by the following error.

ERROR:


ERROR Error: Uncaught (in promise): [Exception... "Failure"  nsresult: "0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame :: http://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js :: computeLabelSizes :: line 11070"  data: no]
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:11070:7
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:11730:39
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:11593:29
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:11405:10
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:7044:11
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:7254:15
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:9503:20
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:9460:10
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:9194:10
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:9133:10
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:35766:12
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:35975:25
[email protected]://localhost:4200/default-src_app_explore-container_explore-container_module_ts.js:35307:10
[email protected]://localhost:4200/vendor.js:69461:14
[email protected]://localhost:4200/vendor.js:69417:17
[email protected]://localhost:4200/vendor.js:69353:14
[email protected]://localhost:4200/vendor.js:80656:35
[email protected]://localhost:4200/vendor.js:81937:18
[email protected]://localhost:4200/vendor.js:80369:21
[email protected]://localhost:4200/vendor.js:80706:29
[email protected]://localhost:4200/vendor.js:81937:18
[email protected]://localhost:4200/vendor.js:80369:21
[email protected]://localhost:4200/vendor.js:80706:29
[email protected]://localhost:4200/vendor.js:82097:16
[email protected]://localhost:4200/vendor.js:82689:26
[email protected]://localhost:4200/vendor.js:6023:42
[email protected]://localhost:4200/vendor.js:7170:20
[email protected]://localhost:4200/vendor.js:117943:28
activateChildRoutes/<@http://localhost:4200/vendor.js:117887:12
[email protected]://localhost:4200/vendor.js:117886:25
[email protected]://localhost:4200/vendor.js:117950:14
activateChildRoutes/<@http://localhost:4200/vendor.js:117887:12
[email protected]://localhost:4200/vendor.js:117886:25
[email protected]://localhost:4200/vendor.js:117946:16
activateChildRoutes/<@http://localhost:4200/vendor.js:117887:12
[email protected]://localhost:4200/vendor.js:117886:25
[email protected]://localhost:4200/vendor.js:117950:14
activateChildRoutes/<@http://localhost:4200/vendor.js:117887:12
[email protected]://localhost:4200/vendor.js:117886:25
[email protected]://localhost:4200/vendor.js:117787:10
activateRoutes/<@http://localhost:4200/vendor.js:117770:99
[email protected]://localhost:4200/vendor.js:25460:29
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:26324:22
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:25466:22
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:26033:22
[email protected]://localhost:4200/vendor.js:24179:17
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:25466:22
[email protected]://localhost:4200/vendor.js:23721:12
subscribeToArray/<@http://localhost:4200/vendor.js:27123:16
[email protected]://localhost:4200/vendor.js:23252:19
[email protected]://localhost:4200/vendor.js:23234:172
[email protected]://localhost:4200/vendor.js:25443:19
[email protected]://localhost:4200/vendor.js:23232:25
[email protected]://localhost:4200/vendor.js:24250:19
[email protected]://localhost:4200/vendor.js:26001:93
[email protected]://localhost:4200/vendor.js:25988:10
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:26033:22
[email protected]://localhost:4200/vendor.js:24179:17
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:25466:22
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:26094:24
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:25164:24
[email protected]://localhost:4200/vendor.js:23737:12
[email protected]://localhost:4200/vendor.js:24547:24
[email protected]://localhost:4200/vendor.js:23737:12
subscribeToArray/<@http://localhost:4200/vendor.js:27126:14
[email protected]://localhost:4200/vendor.js:23252:19
[email protected]://localhost:4200/vendor.js:23234:172
[email protected]://localhost:4200/vendor.js:24524:19
[email protected]://localhost:4200/vendor.js:23232:25
[email protected]://localhost:4200/vendor.js:25145:19
[email protected]://localhost:4200/vendor.js:23232:25
[email protected]://localhost:4200/vendor.js:26077:19
[email protected]://localhost:4200/vendor.js:23232:25
[email protected]://localhost:4200/vendor.js:25443:19
[email protected]://localhost:4200/vendor.js:23232:25
[email protected]://localhost:4200/vendor.js:24250:19
[email protected]://localhost:4200/vendor.js:26001:93
[email protected]://localhost:4200/vendor.js:25988:10
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:26033:22
[email protected]://localhost:4200/vendor.js:24179:17
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:25466:22
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:26324:22
[email protected]://localhost:4200/vendor.js:23721:12
[email protected]://localhost:4200/vendor.js:26033:22
[email protected]://localhost:4200/vendor.js:24179:17

LINES OF CODE MENTIONED IN THE ERROR:

error lines

REPRODUCE:

Sorry that I could not give a plnkr demo since the ng2-charts starting template simply does not work, 404 errors in the console. To reproduce, simply create a new Angular Ionic project, install ng2-charts and chart.js and use the following code:

PACKAGES:

(I know ng2-charts version is quite old but this is a live project)
"@angular/core": "^14.0.0",
"@ionic/angular": "^6.1.9",
"chart.js": "^2.9.4",
"ng2-charts": "^2.4.2"

CONDITIONS:

  1. The error only occurs in Firefox, and breaks the whole app. It works fine in Chrome and even Edge.
  2. The error goes away if I use display:false on scaleLabel and ticks options.
  3. The error appears again if I use [legends]="true", even if ticks and scaleLabel are disabled.

HTML:


<div id="container">
  <div>
    <canvas
      baseChart
      width="300"
      height="300"
      [datasets]="previewChartData"
      [options]="previewChartOptions"
      [legend]="false"
      [chartType]="'line'"
    ></canvas>
  </div>
</div>

TS:


  public previewChartData = [
    {
      data: [
        {
          title: 'Title',
          x: 10,
          y: 20
        }
      ]
    }
  ];
  public previewChartOptions = {
    scales: {
      xAxes: [
        {
          type: 'linear',
          scaleLabel: {
            display: true,
            labelString: 'asd'
          },
          ticks: {
            display: true
          }
        }
      ],
      yAxes: [
        {
          type: 'linear',
          scaleLabel: {
            display: true,
            labelString: 'qwe'
          },
          ticks: {
            display: true
          }
        }
      ]
    }
  };

WHAT I TRIED:

  1. Updating ng2-charts and chart.js (only minor versions).
  2. Moving the charts out of ngIf.
  3. Using different ViewChild options such as static true/false, or removing it all together.
  4. Deleting node_modules and re-installing.
  5. Trying the same options on different charts in my project, same error occurred.
  6. Using different width/height values, removing them, moving them into parent div etc.
  7. Playing with responsive and maintainAspectRatio options.
  8. Playing with chart.js codes where the error occurs.

What am I missing?

Solution

This is a bug in Firefox itself.

There was a bug report about this in chart.js that let to a bug report in ionic which let to a bug report in Firefox itself.

So you will need to wait until Firefox makes a fix for this or not use ionic on the page where you render your chart

https://github.com/chartjs/Chart.js/issues/10720

https://github.com/ionic-team/ionic-framework/issues/26039

https://bugzilla.mozilla.org/show_bug.cgi?id=1792860

Answered By – LeeLenalee

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published