How to make wkhtmltopdf support ChartJS?

[xiranst]

wkhtmltopdf version: 12.4, 13 beta
ChartJs version is latest version: 2.7

in html page, the chart is working fine. but there is blank page after it was rendered with wkhtmltopdf.
how to solve it?

[simonbrunel]

That's certainly because of these changes: #4591 and/or #4596

#4591 requires CSS animations to detect when the canvas is displayed, so you first need to figure out if wkhtmltopdf supports that feature (it might be better to report this issue on the wkhtmltopdf side).

[xiranst]

@simonbrunel this chart is belonged to you? http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html
i can make pdf with this page. could you check it?

[etimberg]

@xiranst that page uses Chart.js v1 which is quite old.

[xiranst]

@etimberg yes, i know this chart.js is old. do you have the old document of this old version? because wkhtmltopdf support the old version not the latest version. i confuse why the old version worked in wkhtmltopdf not the latest version.

[etimberg]

@xiranst the docs for the last release of v1 can be found in the docs folder of https://github.com/chartjs/Chart.js/releases/tag/v1.1.1

[kimyu92]

@xiranst I ran into the same issue, what you could do is, fall back to v2.6 for chart.js

wkhtmltopdf --javascript-delay 1000 test.html test.pdf

  <div style="width: 400px; height: 400px;">
    <canvas id="canvas" style="width: 400px; height: 400px;"></canvas>
  </div>

unless @etimberg @simonbrunel has better idea than this

caveat: it's blurry even with the settings below or approach to replace canvas with image #1961

  {..
     responsive: false,
     responsiveAnimationDuration: 0,
     animation: { duration: 0 },
  }

[aless673]

Same problem here.

Tried all versions of Chart.js and Wkhtmltopdf (Windows and CentOS)
Tried to fix size of canvas and its container.
Disabled animation.

But still not working.

Anyone has a solution ?

[zenichanin]

Anyone fix this problem yet? I've tried turning off animation and set specific dimensions on canvas and parent div element, yet still only blank image shows up in PDF.

[aless673]

I found a solution for my project, it may be useful for others like you @zenichanin :

If you need to navigate on a particular page to request the PDF you can draw the chart on that particular page with this rule :

visibility:hidden

Then in the chart options you can put this code to get an image of the chart :

var image = document.getElementById("chartId").toDataURL();

Then you can show this image (base 64 encoded) by using it directly in src attribute.
For example if you have a "Download PDF" button, just add the image as a POST parameter in the request

After all i want to advise you that the result quality isn't really satisfying (in my case). I switched to Google Chart because it uses SVG and it is perfect for rendering on a PDF !

[benmccann]

It's not clear that there's any bug in Chart.js here. If there's some specific diagnosis of an issue and suggestion on a change we'd be happy to consider it

There appear to be multiple issues with wkhtmltopdf (wkhtmltopdf/wkhtmltopdf#4601 (comment)), so please track those issues in the wkhtmltopdf issue tracker

For questions, please ask on StackOverflow: https://stackoverflow.com/questions/tagged/chart.js

[admicaa]

You can see this working example right here https://github.com/admicaa/larabook

[syntaxc]

I had a similar issue. (#5671)

Recommendation: Switch to C3 Charts. http://www.c3js.org

The charts look similar and are just as easy to configure.
They also worked perfectly with wkhtmltopdf for me.

[xiranst]

@syntaxc thanks for your reply. i used c3 charts and the chart can show in pdf. but the fill-opacity of svg is not worked. did you have some suggestions?

[xiranst]

[syntaxc]

@xiranst What is the html/javascript code you used to create that chart?

[bhaveshevolve]

@simonbrunel this chart is belonged to you? http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html
i can make pdf with this page. could you check it?

Can you help me for more how you generating pdf.
Error display for me "The exit status code '-1073741819' says something went wrong:"

i am rendering charts using charts.js

[admicaa]

@bhaveshevolve, I made an article about making this stuff you can review it here
https://medium.com/@almestaadmicadiab/laravel-snappy-for-pdf-with-charts-e5c9b757d6dd

[itsmeJithin]

You can check out the working code here.

[radoy]

@itsmeJithin thanks, the code running well..

[JamoCA]

@itsmeJithin I think the polyfill makes the differences. I was able to use Chart.js 3.6.0 (with babel-polyfill 7) and it works! Thanks!

[alejandrombc]

@JamoCA can you provide an example of how to achieve it with chartjs 3.6.0?

[JamoCA]

@alejandrombc Sorry. I thought it was v3.6, but it turns out that the sample from @itsmeJithin uses v2.8. (I wasn't paying attention.)

I've reposted the raw HTML for testing purposes. (The "itsme" sample required PHP which I don't use and isn't necessary in order to test this.)

• Raw HTML: https://gist.github.com/JamoCA/42f47f92f96f9f1e6b4555b5fe8e3839
• View HTML: https://gistcdn.rawgit.org/JamoCA/42f47f92f96f9f1e6b4555b5fe8e3839/b29a6b846cf03642434e1d04498485c4684accb5/wkhtmltopdf-chartjs-26-demo.htm

I viewed the above referenced HTML using the QtWeb browser (v3.8.5 from 2013) and it doesn't render the Chart.js graphs either. (I'm aware that it uses an older version of the Qt engine, but it's what I've been successfullly using to aid in debugging WKHTMLTOPDF issues.)

After enabling QtWeb's ancient "Web Inspector", I see that there is a syntax/parse error on line 16 which makes me believe that the issue is due to ES6.

const requestAnimFrame = (function() {

I created an inline variable and confirmed that QtWeb threw the same syntax/parse error when encountering const.

<script>
'use strict';
const testVar = 1;

Upon further searching for solutions, I found this Chartjs github post that indicates that the issue is Qt's ES6 support.
#9381

One recommendation was to "compile chart.js yourself to ES5" using Babel.

I experimented with an chartjs-es5 library (which uses Chart.js 3.2.1). I additionally used a babel polyfill and proxy polyfill (based on console errors).

After doing this, I got a TypeError: 'undefined' is not an object (evaluating 'c.options.layout.padding') error. The ES5 library is minified, so it's difficult to troubleshoot any further.

I found a chartjs-plugin-background NPMJS library that seems to explain the process on how to compile Chart.js to ES5, but their demo uses v2.

Has anyone had any success with an ES5-compiled version of Chart.js v3?

[gbordoni]

@JamoCA Do you hacve any news on this? I'm facing the same issue right not with ChartJs v3.8.

[JamoCA]

I encountered another issue with WKHTMLTOPDF when it came to rendering content from Google Maps. (GM performs browser feature testing, determines that the Qt-enabled browser is outdated and displays a warning message instead of generating the map.)

As a result, I started reviewing alternatives that were affordable and could be hosted in our environment. The one that worked best for me (and was free/open-source) was Puppeteer which requires Node.js and uses Headless Chrome to render. I followed Puppeteer's screenshot demo and further modified the JS script to:

1. accept a URL and OutputImageFilePath
2. send a non-headless user-agent when performing the web request
3. waiting until 'networkidle2' before capturing
4. Identify the DIV (by ID) that I want to capture (which has static width/height defined in PX.)
5. Save image (JPG or PNG) to the local file system

After I had a JPG/PNG screenshot of the rendered element, it was easy to include the static image in the WKHTMLTOPDF document that was being generated.

Here's some related links that I found to be beneficial:

• https://gsswain.medium.com/serverless-pdf-generation-from-html-wysiwyg-as-pdf-2f295a23cb6d
• https://filipvitas.medium.com/how-to-set-user-agent-header-with-puppeteer-js-and-not-fail-28c7a02165da
• https://dev.to/sonyarianto/user-agent-string-difference-in-puppeteer-headless-and-headful-4aoh
• https://nodejs.org/en/knowledge/command-line/how-to-parse-command-line-arguments/