Chart doesnt resize to print area

[osirion]

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

1. Generate a full width chart (screen resolution 2560x1440)
2. Print

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

[glumb]

Any idea on how to solve this? We are also trying to print charts, but they are cut of :(

[Chris1234567899]

Any workaround in the meantime?

[ba0708]

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.