search

apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.22k stars 1.29k forks source link

Font not used when exporting to png, svg #3617

Open ChamkhiAnas opened 1 year ago

ChamkhiAnas commented 1 year ago

Bug report

CODEPEN

(https://codepen.io/anaschamkhi/pen/mdjXGoa)

Explanation

the problem here im using a different font-family for the chart it works in page view, but when i download PNG,SVG the font family change .

What is happening instead?

Font gets replaced with a generic one

What error message are you getting?

None

roquesfr commented 1 year ago

I guest I have a clue. I tried to export with Montserrat font and it didn't work but with Arial it's ok. So the problem come from the font that the export can use I guess.

Riboe commented 10 months ago

Any updates on this issue?

We've just encountered this bug in a fairly new, major project at work and are considering switching to a different charting library, if we cannot get accurate exports from ApexCharts.

Arc-T commented 4 weeks ago

hello everyone. I figured that it's not a bug. everything works correct ! I checked exported SVG font-family in browser and it turned out, every font you use, will be applied without any problem. you just have to install the font that you are using for your charts in your system to see changes when you export. (either PNG/SVG). note that if you change the font name that is different from your installed system fonts, it won't be applied. example: I used 'Shabnam-Farsi' font for my charts but in my system its installed as 'Shabnam FD'. so all I had to do was to rename my font to 'Shabnam FD' in back-end and done! wish you luck.

Riboe commented 3 weeks ago

Thanks for the tip, @Arc-T! You're correct that the SVG exports with the correct font family.

For my use case, there are only two problems left, one being that ApexCharts offers no officially documented way to simply get the SVG string, it only offers a function to trigger a download of the SVG, which isn't ideal, if you want to do anything with the SVG.
In my case, I need to send the SVG to the backend, so it can be added to a PDF file.
Fortunately, this issue can be worked around fairly easily by getting the chart object and calling chart.exports.cleanup() followed by chart.exports.getSvgString(), which is what happens internally when you use the download SVG function.

The other issue is a major one: the legend is exported as a <foreignObject> containing HTML within the SVG, meaning common SVG rendering libraries can't render it.
So while the legend is part of the SVG, it's simply not rendered in the PDF I'm creating, making the charts largely useless, as nobody can tell what's what.
I haven't found a workaround for this yet. I've tried grabbing the HTML manually and throwing it into some online HTML to SVG and HTML to PDF converters, but they fail to render it correctly.
At this point, I think the only way to deal with this is to write a custom converter to convert the embedded HTML to a new SVG and layer that SVG on top of the original, which will be a major pain.