SVG fill not loading in Safari when using Vue Router's history mode

[johndrew]

I have an issue in Safari only where a chart gradient fails to load. Instead of a gradient for the fill, I just see black, which is the same thing I see if I delete the fill property in a browser that works. Our app uses vue router with its history mode, which injects and changes how the svg locates other svg elements to use as fill, which explains why the gradient fails to load.

Looking around, I found that this is a common problem in Safari: airbnb/lottie-web#360. The workaround is to prepend the current route before all instances of the CSS url property used inline in apex svg elements. This workaround fixes the issue, but if there is a better solution (or maybe one through vue-apexcharts) I would prefer that.

We are using:

• apex-charts@3.8.2
• vue-apexcharts@1.4.0
• vue-router@3.0.7

Is this something that could be fixed in a future release?

[kwolfy]

For those who need patch.
But i really hope apexcharts would have absoluteUrl: boolean option param. I can help with implementation

const fill = window.SVG.Gradient.prototype.fill;
window.Gradient.prototype.fill = function (...args) {
  const url = fill.apply(this, args);
  const prefix = `url(${document.location.href}`;

  if (!url.startsWith(prefix)) {
    return url.split('url(').join(prefix);
  }

  return url;
};

[OttoTS]

@kwolfy - For the workaround, should I add that code to the .vue file or is this meant for the source code for apexCharts? Where exactly should it go?

[junedchhipa]

@kwolfy Happy to accept a PR.
It makes sense to apply the patch in this file - https://github.com/apexcharts/vue-apexcharts/blob/master/src/index.js

Do you think, other SPA libraries would also need such a patch? In such a case, doing it in the core-apexcharts library would make sense.

Also, I think, you should modify the window.Gradient.prototype.fill to window.SVG.Gradient.prototype.fill

[kwolfy]

Yes, all spa applications would also need patch.

[JamieMcDonnell]

Did this get solved? generated SVGs still not displaying in Safari iOS or desktop Mac. I created a ticket with the generated SVG file attached - can you please advise how to apply this patch? Thanks so much!

[JamieMcDonnell]

I solved this by removing filters from my graphs.

Using a dropShadow on line charts, or a filter of any kind on a donut chart components also prevents it from rendering.

On a line chart it seems to be enough to emit the 'dropShadow' property from the options object.

On the donut chat I had to add the following styles to my component in order to override the filter prop that gets added to chart segments and labels:

<style lang="scss">
svg{
  path.apexcharts-pie-area,
  text.apexcharts-pie-label{
    filter: none;
  }
}
</style>

Hope that helps someone

[Sitronik]

For those who need patch.
But i really hope apexcharts would have absoluteUrl: boolean option param. I can help with implementation

const fill = window.SVG.Gradient.prototype.fill;
window.Gradient.prototype.fill = function (...args) {
  const url = fill.apply(this, args);
  const prefix = `url(${document.location.href}`;

  if (!url.startsWith(prefix)) {
    return url.split('url(').join(prefix);
  }

  return url;
};

I wanted to try your patch but window.Gradient is undefined

vue3-apexcharts 1.3.0
iOS 13.2.2

I wrote about issue it here

Working patch:

const fill = window.SVG.Gradient.prototype.fill;
  window.SVG.Gradient.prototype.fill = function (...args) {
    const url = fill.apply(this, args);
    const prefix = `url(${document.location.href}`;

    if (!url.startsWith(prefix)) {
      return url.split('url(').join(prefix);
    }

    return url;
  };

I will create PR little later

[kwolfy]

I'm so sorry, that was typo

[kwolfy]

Thats not apexcharts problem itself. it's svg.js problem

[Sitronik]

Thats not apexcharts problem itself. it's svg.js problem

understood, need to send them PR 🙂

[Sitronik]

@junedchhipa Hello, please tell me if you have any plans to update the svg.js dependency since the outdated version 2.7.1 is used

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.