title: Puppeteer with Chart.js
body: <p>I'm trying to generate a PDF using Puppeteer and insert there a Chart.js graph (but the whole PDF should be a text based - not a webpage screenshot). When I open the template I can see graph loaded, but in PDF there is just a blank space instead.
  I'm generating it like this:</p>
  <pre class="lang-js prettyprint-override"><code>async function generatePdf() {
    let data = { value: &quot;myValue&quot; };
    getTemplateHtml()
      .then(async (res) =&gt; {
        // Now we have the html code of our template in res object
        // you can check by logging it on console
        // console.log(res)
        console.log(&quot;Compiing the template with handlebars&quot;);
        const template = hb.compile(res, { strict: true });
        // we have compile our code with handlebars
        const result = template(data);
        // We can use this to add dyamic data to our handlebas template at run time from database or API as per need. you can read the official doc to learn more https://handlebarsjs.com/
        const html = result;
        // we are using headless mode
        const browser = await puppeteer.launch({ args: [&quot;--no-sandbox&quot;] });
        const page = await browser.newPage();
        // We set the page content as the generated html by handlebars
        await page.setContent(html);
        // We use pdf function to generate the pdf in the same folder as this file.
        await page.pdf({
          path: &quot;output2.pdf&quot;,
          format: &quot;A4&quot;,
          displayHeaderFooter: true,
          margin: {
            top: &quot;2.5cm&quot;,
            right: &quot;2.5cm&quot;,
            bottom: &quot;2.5cm&quot;,
            left: &quot;2.5cm&quot;,
          },
          headerTemplate: &quot;&lt;div&gt;&lt;/div&gt;&quot;,
          footerTemplate:
            '&lt;div style=&quot;width: 100%; font-size: 11px !important; overflow: auto; margin-left: 2.5cm; margin-right: 2.5cm; color: ghostwhite;&quot;&gt;&lt;span&gt;TEST&lt;/span&gt;&lt;a href=&quot;http://test.com&quot; style=&quot;float: right; color: #1E90FF; text-decoration: none;&quot;&gt;www.test.com&lt;/a&gt;&lt;/div&gt;',
        });
        await browser.close();
        console.log(&quot;PDF Generated&quot;);
      })
      .catch((err) =&gt; {
        console.error(err);
      });
  }
  generatePdf();
  </code></pre>
  <p>Thanks</p>