Google Chart rendered as PDF has Bars half the correct height

wkhtmltopdf version(s) affected: 0.12.5 (with patched qt)

OS information Ubuntu 16.04.6 LTS (Xenial Xerus)

Description Google Chart rendered as PDF has Bars half the correct height

How to reproduce Here is my drawVisualization function:

    function drawVisualization() {// Create the data table.

       var data = new google.visualization.DataTable();

       data.addColumn('string', 'focus name');
       data.addColumn('number', 'Exceeded');
       data.addColumn('number', 'Achieved');
       data.addColumn('number', 'Not Achieved');
       data.addColumn('number', 'Regressed');

       var width = $($('.container-fluid')[0]).width();
       var height = $($('.container-fluid')[0]).height();

       var options = {
          'width': width,
          'height': height,
          'chartArea': {top:10},
          title: String(),
          vAxis: {
               title: '% Progress',
               minValue: 0,
               maxValue: 100,
               format: '#\'%\'',
               baseline: 0,
          },
          hAxis: {
               title: ''
          },
          seriesType: 'bars',
          series: {
              5: {
                  type: 'line'
              }
          },
          colors: ['#ffe400', '#03ea74', '#ffa000', '#0095ff'],
          annotations: {
              alwaysOutside: true,
              textStyle: {
                 fontSize: 20,
                 auraColor: '#eee',
                 color: '#eee'
              }
          },
          animation: {
             duration: 2000,
             easing: 'linear',
             startup: true
          },
          legend: 'bottom'
       };

       reportData = {
          "combined": {
              "exceeded": "34",
              "achieved": "72",
              "not_achieved": "14",
              "regressed": "8"
          }
       };

       data.addRows([
           ['All Focus Areas', Number(reportData['combined']['exceeded']), Number(reportData['combined']['achieved']), Number(reportData['combined']['not_achieved']), Number(reportData['combined']['regressed'])]
       ]);

       var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
       chart.draw(data, options);

    }
</script>

Running this code under Google Charts with:

google.charts.load('current', { packages: ['corechart'], callback: 'drawVisualization' });

I get the following Bar Chart:

However, if I use \mikehaertl\wkhtmlto\Pdf.php to addPage using the following code:

protected function savePDF($fileName, $data, $outputView, $asString = false)
{
    $orientation = 'portrait';
    $marginTop = 5;
    $marginBottom = 0;
    if ($this->report == 'msi') {
        $orientation = 'landscape';
        $marginBottom = 10;
    }
    $styleArray = [
        'margin-top'    => $marginTop,
        'margin-right'  => 0,
        'margin-bottom' => $marginBottom,
        'margin-left'   => 0,
        'ignoreWarnings' => true,
        'javascript-delay' => 2000,
        'orientation' => $orientation,
        'print-media-type'
    ];
    $pdf = new Pdf($styleArray);
    $data['pdf'] = true;
    $pdf->addPage(view($outputView, $data));
    if ($asString) {
        return $pdf->toString();
    } else {
        if (!$pdf->send($fileName . '.pdf')) {
            print $pdf->getError();
        }
    }
}

I get the following PDF contents:

Not only are the 'bars' half the height they should be, but the colour code key is absent.

If it's relevant, I do have a little styling on my chart container:

div id="chart_div" style="min-width:1250px; min-height:700px; width:100%; height:100%"

Does anyone know what might be going wrong here?

mikehaertl / phpwkhtmltopdf

Google Chart rendered as PDF has Bars half the correct height #362