highcharts - inconsistent number of yAxis gridlines - highcharts

Question

can someone explain why number of yaxis gridlines is less in exported svg rather than in the browser version? Is this happening because of margin update? if so, why it updates margin, but leaves old number of gridlines, shouldn't it be updated as well?
Here is my fiddle http://jsfiddle.net/sabira/r0zvouyp/
Thank you in advance!
Highcharts.chart('container', {
chart:{
events: {
load: function(){
const chart = this;
const {title, yAxis} = chart;
setRightDy(title);
const ticks = chart.yAxis[0].ticks;
let topTick = null;
for(let tick in ticks){
if(ticks[tick].isLast) {
topTick = tick;
}
}
const tickY = ticks[topTick].label.xy.y;
const extraMargin = chart.plotTop-tickY + 10;
const currentMargin = chart.title.alignOptions.margin;
chart.title.update({
margin: currentMargin+extraMargin
}, true, false, false)
}
}
},
title: {
align: 'left',
text: `
<span class='titleText' style="font-weight: 500; font-size: 12.6px; font-family: Retina; fill:black"> Lorem ipsum dolor sit amet </span><br>
<span class='dekText' style="font-size: 8.4px; fill: black; font-weight: 300; font-family: Retina"> Integer quis pharetra tellus. Cras tincidunt libero id dignissim convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</span><br>
<span class='subdekText--strong' style="font-weight: 500; font-size: 8.4px; font-family: Retina; fill:black">Sed aliquam ligula in pretium lobortis.</span>
<span class='dekText' style="font-size: 8.4px; fill: black; font-weight: 300; font-family: Retina"> Integer quis pharetra tellus. Cras tincidunt libero id dignissim convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</span><br>
<span class='subdekText--strong' style="font-weight: 500; font-size: 8.4px; font-family: Retina; fill:black">Sed aliquam ligula in pretium lobortis.</span>
`,
widthAdjust: -40,
margin: 20,
},
exporting: {
scale: 1
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -4
}
},
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}],
});

Answer 1

According to comments - your case is more complicated, but I think that a good solution is do also a yAxis.tickAmount update with a current ticks amount to do not calculate them again while the chart is initializing for exporting. See:
Demo: https://jsfiddle.net/BlackLabel/wju68av5/
chart.update({
title: {
margin: currentMargin + extraMargin
},
yAxis: {
tickAmount: chart.yAxis[0].tickPositions.length
}
}, true, false, false)

Answer 2

The problem which you are struggling to is that you set the new margin after the initial load, which changes and animate the chart. However, the export server renders a new chart with a options which you used to set but without loading the load callback, because there is no delay time to do it.
Why don't you just set the calculated margin as a fixed value in the title.margin object and set the wanted amount of ticks to get it? The visual output is the same.
Demo: https://jsfiddle.net/BlackLabel/owr6f7z2/
yAxis: {
labels: {
align: 'left',
x: 0,
y: -4
},
tickAmount: 7
},
API: https://api.highcharts.com/highcharts/yAxis.tickAmount
If this answer wouldn't fit your requirements please describe more precisely what do you want to achieve.