1

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

enter image description here

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 ?

Niloy Rony
  • 602
  • 1
  • 8
  • 23
  • Try to do it with any canvas and check if the canvas renders in the pdf. Maybe wktmltopdf doesnt support canvas. If so, try to convert the chartJS to image, maybe using Chart.toBase64Image() as specified in [Chart js docs](https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3654). If you need to know how to render a base64 image in html check this [post](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) – Sebastian Ciocarlan Jul 09 '21 at 12:03

2 Answers2

0

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.

Sai Chaitanya Aluru
  • 31
  • 2
  • This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/32283000) – ahuemmer Jul 23 '22 at 07:05
-1

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?

Remko
  • 1
  • 1
  • This seems more like a stream of thought than a real answer - you should provide some examples here. Perhaps mention that 'polyfills' exist for bridging support for older browsers and provide a link. If you used 2.9 successfully, including some additional information about how to backport to this version would be more helpful. – AlexanderGriffin Jul 10 '21 at 15:08