Whtmltoimage does not display graph gridlines for tall charts
I am using symfony to generate a simple graph of tall charts , but wkhtmltoimage is not showing the correct grid lines:
My configuration knp_snappy.image
is like this:
options:
encoding: UTF-8
format: svg
width: 0
enable-smart-width: true
zoom: 3
and I added the following parameters to the graph:
plotOptions: {
series: {
shadow: false,
animation:false,
enableMouseTracking: false
}
}
What am I doing wrong? If I use wkhtmltopdf the output is correct.
+3
source to share
1 answer
Ok I did!
The problem is with a perfectly horizontal (or vertical) path, probably related to an old webkit bug
Than my solution is to edit the horizontal (and vertical) gridline to make it not quite horizontal-vertical.
//fix bug of horizontal-vertical path (TODO: check all series)
yaxis = document.getElementsByClassName('highcharts-yaxis-grid')[0].childNodes;
for (i=0; i<yaxis.length; i++) {
if (yaxis[i].nodeName.toLowerCase() == 'path') {
d = yaxis[i].getAttribute('d').split(' ')[2];
yaxis[i].setAttribute('d', yaxis[i].getAttribute('d').replace(d, parseInt(d)+0.000001));
}
}
xaxis = document.getElementsByClassName('highcharts-xaxis-grid')[0].childNodes;
for (i=0; i<yaxis.length; i++) {
if (yaxis[i].nodeName.toLowerCase() == 'path') {
d = yaxis[i].getAttribute('d').split(' ')[1];
yaxis[i].setAttribute('d', yaxis[i].getAttribute('d').replace(d, parseInt(d)+0.000001));
}
}
For example, with the following horizontal path, I have to edit the first occlusion of the number 264.5, 213.5, 163
<g class="highcharts-grid highcharts-yaxis-grid ">
<path d="M 77 264.5 L 413 264.5"></path>
<path d="M 77 213.5 L 413 213.5"></path>
<path d="M 77 163.5 L 413 163.5"></path>
</g>
to get the following non-horizontal lines
<g class="highcharts-grid highcharts-yaxis-grid ">
<path d="M 77 264.500001 L 413 264.5"></path>
<path d="M 77 213.500001 L 413 213.5"></path>
<path d="M 77 163.500001 L 413 163.5"></path>
</g>
0
source to share