Open osirion opened 1 year ago
Any idea on how to solve this? We are also trying to print charts, but they are cut of :(
Any workaround in the meantime?
I ran into this and had to find a quick solution. It's not pretty, but it's something.
What I ended up doing was to hide the "original" chart for the print media and then show an image of the chart instead (grabbed with the dataURI method).
const chart = new ApexCharts(el, options);
chart.dataURI()
.then(res => console.log(res.imgURI));
This data URI can simply be added to an img
tag's src
attribute. Note that you will have to do this every time you update the chart.
You can specify a hardcoded width or an element's width as follows:
chart.dataURI({ width: window.innerWidth })
.then(res => console.log(res.imgURI));
In my scenario I found that I needed to add a timeout before rendering the image, since the chart was empty otherwise. I think this is because I use animations and those have to complete before the image looks as expected.
setTimeout(() => {
chart.dataURI({ width: window.innerWidth })
.then(res => console.log(res.imgURI));
}, 1500);
In the HTML you can do as follows:
<div class="hidden print:block">
<img src="[insert data URI here]">
</div>
<div class="print:hidden">
<!-- Chart element here -->
</div>
The above uses Tailwind CSS, but can easily be adjusted to use a @media
query (docs)
Note that if you have changed the chart font, you will see Arial being used in your image (https://github.com/apexcharts/apexcharts.js/issues/2166 and https://github.com/apexcharts/apexcharts.js/issues/3617).
It's ugly, but it works. Hopefully it helps someone until it gets fixed or someone shares a better workaround.
Full width chart printed in Brave browser doesnt resize to printable area. Instead a scrollbar is shown and chart is cut.
I did try disabling zoom and enabling: redrawOnParentResize: true, redrawOnWindowResize: true, However, same results.
Steps to Reproduce
Expected Behavior
As with a window resize, expect it to resize to printable area
Actual Behavior
Chart gets a scrollbar and gets cut
Screenshots
Codepen screenshot shows the same...
Reproduction Link
https://codepen.io/SupaMonkey/pen/MWGWoGN