Highcharts per-column gradient not always working - highcharts

Question

I'm trying to make a chart where each column has a gradient assigned to it. It works fine when the screen size is wide or the number of points being displayed is small. For example, a mobile view displaying one week's worth of points works, but showing a month's or 3 month's doesn't. Instead of using the gradient it switches back to using a solid color.
Here is a jsfiddle link that should make it more clear. If you adjust the size of the window you should see the colors in the chart changing from each column having its own gradient to them all being the same solid color.
http://jsfiddle.net/12oqwvLj/
Thanks for the help!
-Karl
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) {
let answerData = data.map(dataPoint => {
let endColor
if ( dataPoint[1] > 28350555){
endColor = 'red'
} else {
endColor = 'green'
}
return {
x:dataPoint[0],
y:dataPoint[1],
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, endColor],
[1, 'yellow']
]
},
}
})
// create the chart
Highcharts.stockChart('container', {
chart: {
alignTicks: false
},
rangeSelector: {
selected: 1
},
plotOptions:{
series:{
turboThreshold: 0
}
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: answerData
}]
});
});