highcharts render does not match grid in docraptor rendered pdf - laravel

Question

Bottom of highcharts rendered chart in pdf
I am attempting to render a highcharts chart inside a blade template and then pass the resulting view/html to DocRaptor in order to turn it into a pdf. The view is rendered with Laravel's View::make and then the render() function. Everything is working as expected except the rendered bars do not match up to the tick marks on the yAxis (horizontal).
I've included an image of what I'm referring to. In the image 2 of the bars (Saturn and Lexus) should be past the 1M tick and I would expect Acura to be further right towards the 1M tick mark. The image only contains the last 3 bars in the graph, but the same holds true for the series as whole.
Less relevent is that I've essentially split up the series data into small enough chunks such that the chart would fit on a page (hence the jQuery $.each()).
The code that produces the chart is below. The code inside the load and render functions are both executed as the document.write debug statements. Any help/ideas would be appreciated.
$("div[id^='Chart_chunk_count_']").each(function() {
var myChart = Highcharts.chart($(this).attr("id"), {
chart: {
borderWidth: 0,
events: {
load: function(event) {
document.write('In load event');
},
render: function(event) {
document.write('In render event');
}
},
height: j_audience_chart_chunks['metadata']['page'][$(this).data("chart-page")]['height'],
type: 'bar',
width: 650
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
bar: {
borderRadius: 3,
borderWidth: 0,
color: j_audience_chart_chunks['metadata']['count_chart']['color'],
pointWidth: 30,
turboThreshold: 0
},
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
/* allowOverlap: true, */
/* backgroundColor: '#FA9005', */
color: '#606060',
crop: false,
defer: false,
enabled: true,
format: '{point.y:,.0f}',
inside: true,
/* overflow: 'none', */
style: {
fontSize: "11px",
fontWeight: "normal",
textOutline: 'none'
}
}
}
},
title: {
text: (type == "index") ? "Index Against Profiled Audience" : "Audience Count"
},
tooltip: {
enabled: false
},
xAxis: {
categories: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['categories'],
minorTickInterval: null,
title: {
text: null
}
},
yAxis: {
min: (type == 'count') ? 0 : -100,
max: j_audience_chart_chunks['metadata']['count_chart']['max'],
title: {
text: null
},
labels: {
/* format: '{point.y:,.0f}', */
overflow: 'justify'
/*
style: {
color: '#fa9005'
}
*/
}
},
series: j_audience_chart_chunks['audience_data'][$(this).data("chart-page")]['series']
});
});

Answer 1

What's happening is that the JavaScript finishes and DocRaptor/Prince begins building the PDF, but the default Highcharts animations haven't finished running. Disabling animations chart wide fixes this.
You need set chart.animation to false like:
chart: {
animation: false
}