高图表网格线无法正确显示

Question

我们有一个大型Web应用程序，我们正在使用High Charts。我们使用Bootstrap，Jquery和其他一些插件。

问题是网格线未正确显示。应用程序非常大，我无法在小提琴中重现这个问题。我基本上是从一个演示小提琴中复制并粘贴代码进行测试，所以代码应该很好。

根据要求，这里是我想要实现的示例：fiddle我试图将它移到除了正文以外的所有元素之外但仍有问题。

以下是截图。

这是我在页面上的代码。我将切换到json加载数据，但我需要在花费时间之前使渲染正确。

 $(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],

        }]
    });