Google Chart bars half the correct height in wkhtmltopdf - google-visualization

Question

My Google Chart works perfectly in the browser:
Works perfectly
However, when I try to render this as a PDF using:
wkhtmltopdf --javascript-delay 2000 --print-media-type chart_dummy.html chart_dummy.pdf
the heights of the bars get halved, and the colour code goes missing:
Rendered PDF with bars half height
I take it there must be some wkhtmltopdf option to correct this, but I can't for the life of me identify one.
I'm using Ubuntu 16.04.7 LTS (Xenial Xerus), and wkhtmltopdf 0.12.5 (with patched qt).
My visualization function is
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);
}
Has anyone a clue how to make the PDF the same as the Browser rendering?