Chart.js: 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 (https://github.com/wkhtmltopdf/wkhtmltopdf/issues/4601#issuecomment-579892132), 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..