Every now and then we like to dedicate a post to a little bug or quirk of our beautiful rendering engine that is webkit. Today we dedicate it to rendering charts from Highcharts.com.
There are two problems that typically occur when people try to render charts from Highcharts with a renderer based on webkit:
- Thick grey lines appear over the graph lines
- The graph lines are not completely drawn, but only partly
Let’s discuss these two problems with examples.These are both taken by rendering the demo at http://www.highcharts.com/demo/.
Thick grey lines problem
The problem with the thick grey lines being displayed is shown in the image on the right. We’ve taken the liberty to take a snapshot of a rendering of one of our competitors’ websites. As you understand by now – we don’t have this issue in our patched system.
As you can clearly see the graph itself is obscured by thick grey lines. In reality these are lines with a very low opacity, which are meant to control mouse tracking. Because a bug in most webkit installations these are displayed with full opacity.
Incomplete graph lines problem
You can rest assured your Highcharts graphs or any other graphs will render fine with our HTML to PDF conversion service. They’ll work with the save as PDF service, the HTML to PDF API and also the SDK!