Chartjs chart broke when using Pagedjs

411 Views Asked by May W. At 20 October 2024 at 21:41

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

Everything is fine but when I call this code, the charts disappear:

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

Are these two packages not getting along?

Original Q&A

There are 1 best solutions below

Sha On 14 March 2023 at 16:58

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

Add this to your <head>-tag:

<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>

 function generateChart() {
    // code for chart here.
 }

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

            afterRendered(pages) {
              
               // add your chart generating code/calls here:

               generateChart();
               someOtherFunction();

               // some even longer running functions.
               return Promise.resolve(
                    someLongRunningStuff()
               );
               ...
             }
        }
        Paged.registerHandlers(myChartCreator);


</script>
</body>

The key is adding your chart code/calls to generate charts to the afterRendered method.

It works perfectly with both Chart.js and amcharts5.

Chartjs chart broke when using Pagedjs

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CHART.JS

Related Questions in PAGEDJS

Trending Questions

Popular # Hahtags

Popular Questions