I was strugling with that too and you self-answer did not help my case. I am using symfony 3.3 and Chart.js 2 and whatever I did, did not work properly. So I have solved it in a different manner (maybe not a clean one) and I wanted to post it here for inspiration to others.

I needed to export a page, that I was presenting to the user in a browser. In browser, I used Javascript to get picture out of the rendered graph with

animation: {
                onComplete: function(animation) {
                    var url=document.getElementById("barChartByCountryWeight{{ part }}{{ subsetKey }}").toDataURL();
                        url: 'saveChartImages',
                        type: 'POST',
                        data: { 'barChartByCountryWeight{{ part }}{{ subsetKey }}': url },
                        success: function(result) {
                            console.log('the request was successfully sent to the server');
                        error: function (request, error) {
                            console.log(" Can't do because: " + error);


And on server side I put it in session and in a controller for the PDF export, I have taken the image from session and put the image in the HTML, that is converted to PDF.

Hope that helps.


Yup I had solved this problem try to use Chartjs 1 not new chart js because laravel snappy uses wkhtmltopdf which doesn't support css animation and new chartjs uses css animation show that and the solution i found is to use google chart which uses svg so you can get high resolution chart


I have implemented the working code for this issue. You can check out the working code here.

NOTE: For generating pdf you must disable the Chart JS animation or add the option javascript-delay=>1000 to the wkhtmltopdf options.


Solved it by downgrading wkhtmltopdf: 0.12.4 > chart.js version seemed to have no influence. I used 2.7.0. Fixed width and height seem to be required as well.

Edit: Since wkhtmltopdf is dead, I switched to Puppeteer recently.


I was dealing with the same issue using rotativa to export my ASP.NET MVC page with Chart.JS to PDF with no luck.

After a couple of days I finally found a super-easy solution to achieve my goal. What I did is simply to use the .toBase64Image() method of Chart.JS to encode the chart to a base64 string variable in Javascript. Then I saved this string into a model and then on the PDF html page a used tag where i put the base64encoded string to a scr property and the result is great :-)


//save Chart as Image
var url_base64 = document.getElementById('myChart').toDataURL('image/png');

//set the string as a value of a hidden element
document.getElementById('base64graph').value = url_base64;

PDF view:

<img style='display:block; width:900px;height:400px;position:relative;margin:auto;text-align:center;' id='base64image'
         src='@Model.base64graph' />


Try adding this,

<script src=""></script>

It worked for me.



Found the answer. After I created a separate file, outside the framework, i did some tests again. It rendered the graph in the browser so I tried to use the command tool WKhtmltopdf, and it did not worked, when it did with other examples (see Update #1). So there is something wrong with my php page.
Ran the same tests that I did in the framework, and got the answer for my problem. By introducing a parent div tag width dimensions in the canvas tag it made the graph render in the page.

<div style="width:800px;height:200;">
    <canvas id="myChart" style="width:800px;height:200;"></canvas>

The proposition was found in this site: Github, so thanks laguiz.


Here's the code that works with wkhtmltopdf version 0.12.5:


<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<script src=""></script>
    .reportGraph {width:900px}

<div class="reportGraph"><canvas id="canvas"></canvas></div>

<script type="text/javascript">
// wkhtmltopdf 0.12.5 crash fix.
'use strict';
(function(setLineDash) {
    CanvasRenderingContext2D.prototype.setLineDash = function() {
            arguments[0] = [1,0];
        // Now, call the original method
        return setLineDash.apply(this, arguments);
Function.prototype.bind = Function.prototype.bind || function (thisp) {
    var fn = this;
    return function () {
        return fn.apply(thisp, arguments);

function drawGraphs() {
    new Chart(
        document.getElementById("canvas"), {
            "responsive": false,
            "data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First Dataset","data":[65,59,80,81,56,55,40],"fill":false,"borderColor":"rgb(75, 192, 192)","lineTension":0.1}]},
window.onload = function() {


$ wkhtmltopdf chart.html chart.pdf:

Loading pages (1/6)
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)

Related Query

More Query from same tag