Chartjs in pdf doesn't work

[SnowDiamond]

Hi! Could you please help me with integrating Chart.js? I'm trying to render Chart.js in pdf, and it doesn't work for some reasons, just empty page. I tried setting javascript_delay: 5000 and also no_stop_slow_scripts: true with no luck.

Here is my code:

reports/show.pdf.slim:

doctype html
html
  head
    meta content=("text/html; charset=utf-8") http-equiv="Content-type"
    = javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"

  body
    canvas id="myChart" width="200" height="200"

    javascript:
      var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ["Red", "Blue", "Yellow"],
              datasets: [{
                data: [12, 19, 3],
                backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)']
              }]
          }
      });

reports_controller.rb:

class ReportsController < ApplicationController
  def show
    respond_to do |format|
      format.pdf do
        render pdf: "pdf",
          template: 'reports/show.pdf',
          javascript_delay: 5000
      end
    end
  end
end

P.S. With option show_as_html: true Chart.js works perfect.

[pcraston]

I'm having the same problem. It works when you use Chart.js version <= 2.6.0

[bbugh]

I'm on chartjs 2.3.5 and it's not working for PDFs for us either. @SnowDiamond did you figure this out?

[SnowDiamond]

Yes, but I switched to chart.js 1.1.1.

[bbugh]

Thanks. We ended up switching to puppeteer with a basic pdf generator script and it works fantastically and is about 4x faster to render.

[reubenbrown]

I am experiencing the same problem as well.

The wicked_pdf_helpers do not seem to be loading the Chart.js library. Chart.js also doesn't load when I include it as a cdn.

Because of that I thought maybe there is a compatibility issue between Chart.js and wkhtmltopdf but even adding a polyfill from a comment in a related issue doesn't resolve the issue.

[deepakmahakale]

Has anyone figured this out? I am not able to load the chart in pdf.

All I get in the PDF is this:

I am using the following:

• wicked_pdf (2.1.0)
• chartkick (4.1.2)
• chart.js-3.6.0

[cseelus]

I had to downgrade to Chartkick 3

[viktorsmari]

Is there a good tutorial on how to use this with Rails 6/7 and Chartkick 3/4?

[cseelus]

Is there a good tutorial on how to use this with Rails 6/7 and Chartkick 3/4?

Check out the Chartkick website, it has separate instructions for Rails 5, 6 and 7.

[viktorsmari]

Is there a good tutorial on how to use this with Rails 6/7 and Chartkick 3/4?

Check out the Chartkick website, it has separate instructions for Rails 5, 6 and 7.

I meant how to view Charts in PDF. My Chart.js 3 charts are not showing on PDF.

[unixmonkey]

Many chart libraries have trouble with wkhtmltopdf, since the webkit engine it is built on is equivalent to a very old version of Chrome (around Chrome 13, I think). That means it doesn't support a lot of ES6 style JavaScript, CSS3, Flexbox, or other modern-ish technologies used to build charting libraries.

It might be helpful to find and install a very old version of Chrome or Chromium and do your testing and debugging with that before trying to transform into a PDF. Maybe if you install some shims or polyfills it might work.

Also, many charting libraries need time to generate the charts and start with a loading screen of sorts, you may need to extend the javascript timeout options or window_status when working with these.

Also, I suggest trying to include library code from a fully-qualified URL and using javascript_include_tag over wicked_pdf_javascript_include_tag (at least to debug, then maybe later converting to a file-based asset). The latter inlines the JS in a <style> tag, and I've seen that get broken by large JS libraries that might include a </style> in the source code.

In short, I don't have a lot of hope that most modern Chart libraries are going to be compatible with wkhtmltopdf and thus wicked_pdf, but if you find a combination that works, please let us know.

[cseelus]

For me this combination of gems works surprisingly well, no shims javascript_delay, window_status etc needed anymore:

gem 'wicked_pdf', '~> 2.1.0'
gem 'chartkick', '3.4.2'
gem 'wkhtmltopdf-binary-edge', '~> 0.12.6.0

I've included a JS file containing the Chart.js and Chartkick JS code, as per the Chartkick documentation into my layout pdf.html.erb like this:

<%= wicked_pdf_javascript_include_tag 'charts' %>

Some PDF report:

[JennsiS]

For me this combination of gems works surprisingly well, no shims javascript_delay, window_status etc needed anymore:

gem 'wicked_pdf', '~> 2.1.0'
gem 'chartkick', '3.4.2'
gem 'wkhtmltopdf-binary-edge', '~> 0.12.6.0

I've included a JS file containing the Chart.js and Chartkick JS code, as per the Chartkick documentation into my layout pdf.html.erb like this:

<%= wicked_pdf_javascript_include_tag 'charts' %>

Some PDF report:

Hello @cseelus where do you add the JS file?

[cseelus]

@JennsiS Into my pdf .erb file.