2

I am using Chartjs & Paged.js to print pages.

Before paged.preview

everything is fine until I found if I write these code

  let flow = paged.preview().then((flow) => {
    console.log("Rendered", flow.total, "pages.");
  });

charts disappear.

are these two package not get along...?

enter image description here

May W.
  • 169
  • 1
  • 14
  • I'm having the same issue. I tried using a normal canvas and rendered a rectangle to it. Before calling `paged.preview()` it is fine, then it seems like Paged.js clears the canvas. – mevens Mar 09 '23 at 09:59
  • I was wondering if you ever found a solution to this one? I have the same problem but just with amcharts5 javascript. It seems like any rendered js is removed by Paged.js – Sha Mar 13 '23 at 15:30
  • unfortunately, I didn't find any solution in the end. – May W. Mar 14 '23 at 10:36
  • 1
    Was able to get it working by implementing a custom handler which triggers the chartjs rendering on the `afterRendered` hook in paged.js. Feels a bit hacky, but hope it helps. https://pagedjs.org/documentation/10-handlers-hooks-and-custom-javascript/ – Kristoffer Berge Mar 14 '23 at 13:46
  • Any news on this one? Also paged js is not working even with regular canvases. – Stefan Mares Jun 16 '23 at 12:24

1 Answers1

1

I found a solution to this after help by the good people at https://pagedjs.org/

<head>
    <script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</head>

Now in your body, add the following Paged.js extension:

<body>
<div id="yourchart"></div>
<script>

  class myChartCreator extends Paged.Handler {
            constructor(chunker, polisher, caller) {
                super(chunker, polisher, caller);
            }

            afterRendered(pages) {
               loadYourChart();
               someOtherFunction();
               return Promise.resolve(
                    someLongRunningStuff()
               );
               ...
             }
        }
        Paged.registerHandlers(myChartCreator);

</script>
</body>

It works perfectly with both Chart.js and amcharts5.

Sha
  • 2,185
  • 1
  • 36
  • 61