Blog
Generate PDF Report with Highcharts and wkhtmltopdf
Intro
As a developer, you might be tasked with the challenge of generating some kind of report to PDF. The report requires graphs like line graphs, bar charts, pie charts, etc. You figure you can generate the report in HTML and then print the HTML to PDF. Great plan, let’s do it.
My favorite library for generating charts in HTML and javascript is called Highcharts.js. Highcharts is an excellent javascript library that you can use to generate all sorts of charts. In this post, we are simply using one of their demo examples – a basic line chart.
To render this report server side, we recommend using a PDF engine like wkhtmltopdf or Headless Chrome. However, simply just sending the HTML to these engines to render the PDF will yield some ugly results. There is some finagling required to make the charts look right and a couple important points.
Important Points
1 – Disable animation. By default, line charts and other charts generated by highcharts will fire off a nice animation. However, this will not work well with PDF rendering. Under the plotOptions object in the highcharts settings, set animation: false.
2 – Manipulate the width. wkhtmltopdf and Headless Chrome render PDFs sort of in the Responsive state, so assume a small width browser. You may have to continuously adjust the widths of the charts via css and the highcharts settings to ensure it looks right.
3 – Location of the legend. Same as #2, the location of the legend and how the legend appears may get mashed up in the PDF. Move it around and adjust the settings to get it looking right.
Sample Code
The following Github Gist is the basic demo line graph with adjusted settings and CSS for highcharts that make the graph look correct in the PDF. Use those settings as the baseline for the work you need to do on your own. Feel free to copy and paste this HTML into the DEMO of the home page for Api2Pdf.com to see how it looks when rendered by wkhtmltopdf.
| <html> | |
| <head> | |
| <script src="https://code.highcharts.com/highcharts.js"></script> | |
| <script src="https://code.highcharts.com/modules/series-label.js"></script> | |
| <script src="https://code.highcharts.com/modules/exporting.js"></script> | |
| <script src="https://code.highcharts.com/modules/export-data.js"></script> | |
| <style> | |
| #container { | |
| min-width: 800px; | |
| max-width: 800px; | |
| height: 400px; | |
| margin: 0 auto | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"></div> | |
| <script> | |
| Highcharts.chart('container', { | |
| title: { | |
| text: 'Solar Employment Growth by Sector, 2010-2016' | |
| }, | |
| subtitle: { | |
| text: 'Source: thesolarfoundation.com' | |
| }, | |
| yAxis: { | |
| title: { | |
| text: 'Number of Employees' | |
| } | |
| }, | |
| legend: { | |
| layout: 'vertical', | |
| align: 'right', | |
| verticalAlign: 'middle' | |
| }, | |
| plotOptions: { | |
| series: { | |
| label: { | |
| connectorAllowed: false | |
| }, | |
| pointStart: 2010, | |
| animation: false | |
| } | |
| }, | |
| series: [{ | |
| name: 'Installation', | |
| data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] | |
| }, { | |
| name: 'Manufacturing', | |
| data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] | |
| }, { | |
| name: 'Sales & Distribution', | |
| data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] | |
| }, { | |
| name: 'Project Development', | |
| data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] | |
| }, { | |
| name: 'Other', | |
| data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] | |
| }], | |
| responsive: { | |
| rules: [{ | |
| condition: { | |
| maxWidth: 500 | |
| }, | |
| chartOptions: { | |
| legend: { | |
| layout: 'vertical', | |
| align: 'right', | |
| verticalAlign: 'bottom' | |
| } | |
| } | |
| }] | |
| }, | |
| exporting: { | |
| enabled: false | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
by
Thanks for visiting our site. If you are eager to start generating PDFs right away with just a few lines of code, grab your API key and check out our docs!