The Export to PNG is not working in Chrome, Edge, Firefox and Opera

[betonetotbo]

I activated the toolbar and click on hamburger icon on "Export to PNG" but nothing happens.

I'm using ApexCharts 3.19.2.

Debugging the apexcharts , the method dataURI I noted that the img.onload event isn't fired, here is a chunk of the code:

      key: "dataURI",
      value: function dataURI() {
        var _this = this;

        return new Promise(function (resolve) {
          var w = _this.w;

          _this.cleanup();

          var canvas = document.createElement('canvas');
          canvas.width = w.globals.svgWidth;
          canvas.height = parseInt(w.globals.dom.elWrap.style.height, 10); // because of resizeNonAxisCharts

          var canvasBg = w.config.chart.background === 'transparent' ? '#fff' : w.config.chart.background;
          var ctx = canvas.getContext('2d');
          ctx.fillStyle = canvasBg;
          ctx.fillRect(0, 0, canvas.width, canvas.height);

          var svgData = _this.getSvgString();

          if (window.canvg && Utils.isIE11()) {
            // use canvg as a polyfill to workaround ie11 considering a canvas with loaded svg 'unsafe'
            // without ignoreClear we lose our background color; without ignoreDimensions some grid lines become invisible
            var v = window.canvg.Canvg.fromString(ctx, svgData, {
              ignoreClear: true,
              ignoreDimensions: true
            }); // render the svg to canvas

            v.start();
            var blob = canvas.msToBlob(); // dispose - missing this will cause a memory leak

            v.stop();
            resolve({
              blob: blob
            });
          } else {
            var svgUrl = 'data:image/svg+xml,' + encodeURIComponent(svgData);
            var img = new Image();
            img.crossOrigin = 'anonymous';

>>>> THIS ISN'T FIRED!
>>>>>  img.onload = function () {
              ctx.drawImage(img, 0, 0);

              if (canvas.msToBlob) {
                // IE and Edge can't navigate to data urls, so we return the blob instead
                var _blob = canvas.msToBlob();

                resolve({
                  blob: _blob
                });
              } else {
                var imgURI = canvas.toDataURL('image/png');
                resolve({
                  imgURI: imgURI
                });
              }
            };

            img.src = svgUrl;
          }
        });
      }
    }

I tested on Microsoft Edge and the resulting PNG is blank. So, also not working.
On Firefox 77.0.1 also nothing happens.
So as on Opera 68.0.3618.125, nothing happens.

[junedchhipa]

I tested in Firefox 77 and Chrome 83, it works fine.
Can you please create a codepen, so I can confirm if it is not due to some configuration?

[betonetotbo]

Here is the PEN:

https://codepen.io/betonetotbo/pen/oNbjOvE

Is something related to the dataLabels formatter.

[betonetotbo]

any workaround?

[betonetotbo]

any workaround?

If I remove the , { style: "currency", currency:"BRL" } from val.toLocaleString('pt-BR', { style: "currency", currency:"BRL" }) leaving just val.toLocaleString('pt-BR'), it works.
So, the resulting string is 26,03 instead of R$ 26,03

[betonetotbo]

Both has the same result, but the second make the Export To PNG not work. Why?????

This works:

  ,"dataLabels": { "formatter" : val => { 
      let ret = 'R$ ' + Intl.NumberFormat('pt-BR', { maximumFractionDigits: 2}).format(val);
      return ret; 
  } }

This NOT works:

  ,"dataLabels": { "formatter" : val => { 
      let ret = Intl.NumberFormat('pt-BR', {style:'currency',currency:'BRL'}).format(val);
      return ret; 
  } }

[betonetotbo]

I found the char who is getting us in trouble:

Using the {style:'currency',currency:'BRL'} it is generating the SVG with an  .
The version who concatenates the string 'R$ ' does not result in a   at the SVG.

See at the image above (left SVG generates the PNG).

I attached the both SVGs (correct and buggy) formatted.

svgs.zip

[gfortaine]

It looks like that it could be (dirty) fixed this way :

https://github.com/gfortaine/apexcharts.js/blob/1102380e0bb1c77ef80e9a5cf3cdb614dc475c81/src/modules/Exports.js#L16

[junedchhipa]

@gfortaine Have you tested your solution to check if it works in all browsers?
If yes, I can accept a PR.

[gfortaine]

@junedchhipa It should work on all browsers, please let me check. However, it seems that one would like something more elegant than a rough replace 🙂 I will prepare a PR for this as well as for some other things (timezone & upgrade to SVG.js v3.x).

[jclijmans]

@gfortaine @junedchhipa Is there any progress on this issue?
I'm currently running into this on my current project where I need to create a png from a bubble chart.

Thx

[thijscrombeen]

I also need this functionality.
Any news on this? As I see it the code has been written. It just needs a PR ?
If not I can create a PR based on https://github.com/gfortaine/apexcharts.js/blob/1102380e0bb1c77ef80e9a5cf3cdb614dc475c81/src/modules/Exports.js#L16

[Nickinthebox]

I also have the same issue. The quick fix offered by @gfortaine is not the most pretty one I have seen but seems to actually work!

We may also try to change Intl.NumberFormat to stop using   for non breakable space in currency format (and use   instead) ... but it might take (a very long) time to be approved / implemented ...