Adding Highcharts to PDFs with DocRaptor HTML-to-PDF

Adding Highcharts to DocRaptor PDFs

Spicing up your PDFs with Highcharts charting API is really easy. All you need to do is disable animations in the Javascript that creates your Highcharts graph and set our JavaScript parameter to “true” when making your POST request.

You can grab the input HTML here, and the resulting PDF here.

Let’s take a closer look at how this works!

First, you’ll want to disable animation for any Highchart graph you want to add to your PDF. Animations look really cool in a browser, but DocRaptor’s HTML-to-PDF service expects a static resource to convert into a PDF, and animations aren’t exactly static. You’ll just get a blank graph when attempting to use Highcharts unless you disable animation. Luckily enough, disabling animations is also easy to do:

Disabling animation in Highcharts

In our example code, we’ve added this to the plotOptions of the Javascript that renders each of these charts:

animation: false,

Next, you’ll need to set “javascript” to “true” when you make your POST request. This parameter uses DocRaptor’s Javascript engine when rendering your document, which will force DocRaptor to wait until your Highcharts graphs are actually loaded before attempting to create your document.

Using DocRaptor’s JavaScript engine

That’s all there is to it! You can see the code that generates the charts used in this example PDF on Highcharts example page.