Highcharts charts on a page not rendering correctly when output to PDF using wkhtmltopdf

Question

My wkhtmltopdf PDF output of a page with several Highcharts charts on it is missing some elements of the charts, primarily all of the simple straight lines, including tick marks, grid lines, column borders, legend borders and the lines in my line/spline charts (data points display).

I have tried the tricks used to solve this issue from other stack questions, namely setting all of the following on the series:

enableMouseTracking: false,
shadow: false,
animation: false

...as well as setting those on the column/spline. No luck.

Here is a link to an image of the browser page.

Here is a link to an image of the pdf output.

Here is a link to a gist of my chart options for the first two charts.

This is all on Linux Ubuntu 12.04 installed in a VirtualBox guest, using the latest Highcharts download as of two days ago and wkhtmltopdf version 0.10.0_rc2. The calls to wkhtmltopdf are primarily going through the PDFKIT gem in a Rails 3 application, but I have made direct calls to wkhtmltopdf on the command line with the same results.

TIA for any help!

UPDATE:

I have isolated the problem down to a particular snippet of HTML that comes before the charts. I am using the Twitter Bootstrap css/javascript framework, this code produces a set of buttons:

<div class='btn-group' data-toggle='buttons-radio'>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2012">2012</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2011">2011</button>
  <button class="filterButton btn btn-primary selected" data-filter="school_year" data-group="dr_filter" data-value="2010">2010</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2009">2009</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2008">2008</button>
</div>

Specifically, it is the presence of the .btn-group tag that is causing the issue - take that away, leave everything else as is, and the PDF generates identical to the page display without the noted issues. Also, if you move this snippet to anywhere on the page after the charts, everything works correctly.

I have further isolated the problem down to the actual html/css, as the issue still exists when I completely disable the Bootstrap javascript functions.

Answer 1

There is reported an issue on wkhtmltopdf which is very similar to your case. See issue 689. Wkhtmltopdf doesn't handle transparency/shadows properly and can result in unpredictable results.

Remove all stroke-opacity attributes in the svg and replace them with the opacity attribute, before you send it to wkhtmltopdf. This piece of code will do the trick.

nodes = document.querySelectorAll('*[stroke-opacity]');

for (nodeIter = 0; nodeIter < nodes.length; nodeIter += 1) {
    elem = nodes[nodeIter];
    opacity = elem.getAttribute('stroke-opacity');
    elem.removeAttribute('stroke-opacity');
    elem.setAttribute('opacity', opacity);
}

Answer 2

try passing option javascript-dealy

wkhtmltopdf --quiet --page-size letter --encoding UTF-8 --javascript-dealy 5000 - -

or if you are using pdfkit gem/library try adding below line in html code

 <meta content="5000" name="pdfkit-javascript-delay"/>