wkhtmltoimage does not show gridlines of highcharts graph

Question

I'm using symfony to generate a simple highcharts graph, but wkhtmltoimage does not show the gridlines properly:

wkhtmltoimage highcharts graph

My knp_snappy.image config is the following:

options:
        encoding:           UTF-8
        format:             svg
        width:              0
        enable-smart-width: true
        zoom:               3

and I have added the following options to the graph:

plotOptions: {
        series: {
                shadow: false,
                animation:false,
                enableMouseTracking: false
        }
}

What am I doing wrong? If i use wkhtmltopdf the output is correct..

Are you explicitly setting a gridLineWidth? http://api.highcharts.com/highcharts/yAxis.gridLineWidth Does anything change if you try to set it to something different than 1? — GavinoGrifoni, May 03 '17 at 10:41
Yes, i have change the size and the color but nothing has changed — Luca Galasso, May 03 '17 at 12:49
Could you show the whole chart config? Also, disable [chart.animation](http://api.highcharts.com/highcharts/chart.animation). — Paweł Fus, May 04 '17 at 12:30
[This](https://jsfiddle.net/GalassoBelka/sw9nzrt1) is my entire example, and i have no animation, any hints? — Luca Galasso, May 04 '17 at 13:18

score 0 · Answer 1 · answered May 05 '17 at 16:28

Ok, i have done!

The problem is with the perfectly horizontal (or vertical) path, probably is related with old's webkit bug

Than my solution is to edit the horizontal (and vertical) line of the grid to make it not perfectly 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 occurrency 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 obtain 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>

wkhtmltoimage does not show gridlines of highcharts graph

1 Answers1