TypeError : e is null for firefox

[SandeepKapalawai]

Hi there @junedchhipa ,

i have a dashboard where i am displaying the apex charts and up on clicking on the side nav bar , i will be loading other page , so when ever i load another page from the dashboard in firefox , i m getting below error type error specific to firefox only

Is there any solution for this, Thank you.

[SandeepKapalawai]

Hi @junedchhipa , any update on the above issue

[junedchhipa]

Difficult to know what's going on without a reproducible example.
Can you please do this?

1. Specify which version of Apexcharts are you loading.
2. If creating a reproducible example is not feasible, load un-minified ApexCharts into your project so the error message is more clear.

[th1rst]

I had the EXACT same error as well. After trying to figure it out for several hours, I think I found the solution.

My setup should be the same as OP:

• React
• React-ApexCharts
  (- Ionic 5 ?)

After looking at the Debugger, the (horrible minified) Error breakpoint had to do with the width/height of the chart, so I figured to just remove the "width" property of the Chart component. So from

<Chart options={this.state.options} series={this.state.series} type="donut" width="350" />

to

<Chart options={this.state.options} series={this.state.series} type="donut" />

After removing it, the chart works flawlessly!

[bubnenkoff]

same issue! Is there any another way to set width? Without width graphic is become compressed by X axis.

[Hexacters]

Same issue! i am using ngx-apexchart and apex chart both are latest version only. i am facing this issue only in Firefox browser even i am not using any width in my components

[bubnenkoff]

It's seems that something wrong with NodeJS 15. I was needed to downgrade back to 14, because got multiple errors with ApexCharts even on Chrome.

[robertjarske]

downgrading to apexcharts@3.22.2 with react-apexcharts@1.3.6 worked for me!

[L-U-C-K-Y]

I'm running into the same issue too, I have downgraded to apexcharts@3.22.2 with react-apexcharts@1.3.6 for now, thanks @robertjarske for the workaround!

[rjimenezda]

I think this also happens without react-apexcharts, as detailed here: #2170

[alejandroeclair]

This is still an ongoing issue, I'm able to reproduce it on Firefox (latest) in MacOS, with react-apexcharts 1.3.7

EDIT:
I've found one of the possible causes of this issue;
turns out that Firefox doesn't like the changing of options/series of charts that are not currently visible on screen. In my specific scenario, I have React+MaterialUI, and my charts are inside Tab components. So I was running into issues when data was being refreshed for a chart that was in an inactive Tab

[ccorpuz]

I'm running into the same issue too, I have downgraded to apexcharts@3.22.2 with react-apexcharts@1.3.6 for now, thanks @robertjarske for the workaround!

This workaround worked for me too (macOS Firefox). Issue for me is that this version doesn't support timeline charts.

[ekhmoi]

Having the exact same issue with ng-apexcharts.

[SandeepKapalawai]

removing the width="350" attribute works , but not very sure of the reason
@junedchhipa

[ekhmoi]

I was investigating this issue a bit more.
Seems like the issue is caused by the modified version of svg.js that is bundled together with Apexcharts.
This is the create function of SVG.Matrix that throws the error:

    create: function (source) {
      var base = arrayToMatrix([1, 0, 0, 1, 0, 0])

      // ensure source as object
      source = source instanceof SVG.Element
        ? source.matrixify()
        : typeof source === 'string'
          ? arrayToMatrix(source.split(SVG.regex.delimiter).map(parseFloat))
          : arguments.length == 6
            ? arrayToMatrix([].slice.call(arguments))
            : Array.isArray(source)
              ? arrayToMatrix(source)
              : typeof source === 'object'
                ? source : base

      // merge source
      for (var i = abcdef.length - 1; i >= 0; --i) {
        this[abcdef[i]] = source[abcdef[i]] != null
          ? source[abcdef[i]] : base[abcdef[i]]
      }
    }

On line 1663 it checks typeof source === 'object' then uses it. And typeof null as we know it is object.
The question is why parameter source is null instead of undefined, so it gets the default value base?

[ekhmoi]

Could you guys check out my fork to see whether it fixes the issue for you as well?
You can basically change apexcharts in your package.json like this:

    "apexcharts": "ekhmoi/apexcharts.js",

Will make a PR after confirmation.