High Charts Grid Lines Not displaying Correctly - highcharts

Question

We have a large web application that we are using High Charts in. We use Bootstrap, Jquery and some other plugins.
The issue is that the grid lines are not showing up correctly. The application is pretty large and I cannot recreate the issue in a fiddle. I basically copy and pasted the code from a demo fiddle for testing so the code should be good.
As requested, here is the example fiddle of what I am trying to achieve: fiddle I tried to move it outside all elements except the body and still have the issue.
Here is a screenshot.
Here is the code I have on my page. i will be switching to json loading the data, but I need to get the rendering correct before I spend the time on that.
$(function ()
{
$('#ChartContainer2').highcharts({
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 20,
beta: 20,
viewDistance: 0,
depth: 60
},
marginTop: 80,
marginRight: 40
},
title: {
text: ''
},
xAxis: {
categories: ['15-05 SFYBAKE Brooklyn Bred - Bakery Rack Display (NOR) Brooklyn Bred Rack in Bakery',
'10-10 Savemart- Lucky 5 Hour Diet HBC resets Savemart-Lucky 5 Hour Diet HBC Resets',
'11-10 SFY 5 HOUR Energy CMT Dist. Check 5 HOUR Energy CMT Dist. Check',
'10-07 SFY 5 Hour Energy Drink 5 Hour Energy Drink',
]
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Percent Complete'
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
bar: {
stacking: 'normal',
depth: 10
}
},
series: [{
name: 'John',
data: [5, 3, 4],
}, {
name: 'Joe',
data: [3, 2, 1],
}, {
name: 'Jane',
data: [2, 5, 6],
}]
});