Chart JS version 3 not showing in pdf for engine wkhtmltopdf

Question

I am trying to generate PDF using wkhtmltopdf , where there has chart js. Chart js version 3.4.x

I have written below html to generate chart

Hello

Js code :

<script type="text/javascript">

const labels = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
];
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45],
  }]
};

const config = {
  type: 'bar',
  data,
  options: {
     animation: false,
        scales: {
            x: {
                grid: {
                tickColor: 'red'
                },
                ticks: {
                color: 'blue',
                }
            }
        }
  }
};

var myChart = new Chart(
    document.getElementById('myChart').getContext('2d'),
    config
);

</script>

Chart is working fine in html

After give the command

wkhtmltopdf --javascript-delay 1000 http://localhost/pdf_test/index.html testpdf101

I got the paragraph but not chart. Same procedure I have tested for version chart js 2.9.4 where it's working fine. Why it's not working in version 3 ? How can I generate pdf for chart js version 3.4.x ?

Answer 1

I am also facing similar issue with chartjs radar chart in pdfkit = 1.0.0 to generate PDFs, as of my understanding pdfkit is using wkhtmltopdf engine in background. wkhtmltopdf uses css2 which has lot of incompatibility issue with chartjs or newly developed chart libs.

Answer 2

Experienced the same issue with another pdf tool (hiqpdf) it seems the engine these tools use support JavaScript/jquery versions the same as Internet explorer 11 does. When you check your page in IE11 you probably see syntax errors related to chart.js because chart.js doesn't support ie11 anymore they seemed to have used syntax that can't be used in pdf render tools.. I struggled with this the whole week and finally chose to use the 2.9 version of chart.js using the v3 migration guid backwards… with 2.9 everything seems to work fine in combination with pdf generation tools, so probably the fastest solution for you?