How to render amcharts within Puppeteer using React JS and create a PDF?

Question

I am trying to render an amchart4 Piechart in a React JS script with a headless instance of puppeteer to create a PDF file.

However, the PDF that gets downloaded just contains the amcharts symbol and not the chart itself. What I think is, before the chart renders, puppeteer is taking the snapshot and rendering the PDF. Following is the puppeteer code.

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

await page.setContent(pageContent, { waitUntil: 'networkidle0' });
await page.addScriptTag({
    path: './templates/index-bundle.js',
    type: 'text/javascript',
});
const buffer = await page.pdf({
    format: 'A4',
    printBackground: true,
    margin: {
        left: '0px',
        top: '0px',
        right: '0px',
        bottom: '0px',
    },
});
await browser.close();

I am sure that there is no problem in the js file because when I run puppeteer with headless: false , a chrome instance opens up and the chart is correctly displayed without any console errors.

Can someone please help me with injecting the js script correctly inside puppeteer so that puppeteer waits until the chart rendering has finished.

Answer 1

Adding await page.waitFor(500) after page.addScriptTag() and removing the animation theme of amcharts from js code helped me solve it as Puppeteer halts before taking the snapshot.

PS: Even though the animation was removed, the chart still took some time to render completely, which is why I had to add a delay.

Please comment in case you find a better solution other than delay.