exporting highcharts polar chart to PDF with phantomjs

Question

I'm evaluating highcharts for a client project and have run into a problem rendering a polar chart with phantomjs. The charts lines come out as a thick grey blob! I thought this was due to animation but thats turned off. Will try and post an image but anyone have any thoughts on what else could be causing this? If I print preview from chrome it also looks ok.

Here's the image.

This was created as part of a report which I built using the rasterize.js script included with phantomjs. All the other charts work fine, the polar chart is the only one not coming out. If I use the highcharts export server script with phantomjs it works fine - but that only allows for 1 chart to be exported to PDF. I need to export a whole web page as a PDF including some charts.

Answer 1

There's another workaround on the project's bug tracking:

https://github.com/ariya/phantomjs/issues/10364#issuecomment-14992612

All you need to do is to remove all page elements with low opacity before rendering to file:

diff --git a/examples/rasterize.js b/examples/rasterize.js
index fcd74cd..dcc81d4 100644
--- a/examples/rasterize.js
+++ b/examples/rasterize.js
@@ -19,6 +19,16 @@ if (phantom.args.length < 2 || phantom.args.length > 3) {
             console.log('Unable to load the address!');
         } else {
             window.setTimeout(function () {
+                // Remove all low-opacity paths. see PhantomJS  issue #364 
+                page.evaluate(function () {
+                    var paths = document.getElementsByTagName("path");
+                    for (var i = paths.length - 1; i >= 0; i--) {
+                        var path = paths[i];
+                        var strokeOpacity = path.getAttribute('stroke-opacity');
+                        if (strokeOpacity != null && strokeOpacity < 0.2)
+                            path.parentNode.removeChild(path);
+                    }
+                });
                 page.render(output);
                 phantom.exit();
             }, 200);

You can use that to grab graphs even if you don't have access to the source of the page containing the graph.