Highchart spider web chart

Question

I've made a spider chart using highcharts but the data points have moved to the far left. I'm following this example. Here is my code:

<div id="container2" style=" position: relative;"></div>

<script>
    $(function () {

        $('#container2').highcharts({

            chart: {
                polar: true,
                type: 'line',
                margin: 0
            },

            exporting: {
                enabled: false,
                buttons: {
                    enabled: false
                }
            },

            title: {
                text: '&nbsp',
                x: -80,
                useHTML: true
            },

            pane: {
                size: '70%'
            },

            xAxis: {
                categories: ['Math', 'Comp. Sci', 'Science', 'Social Sci.', 'English', 'Hindi'],
                tickmarkPlacement: 'on',
                lineWidth: 0,
                labels: {
                    align: 'center',
                    distance: 43
                }
            },

            yAxis: {
                gridLineInterpolation: 'polygon',
                lineWidth: 0,
                min: 0,
                endOnTick: true,
                showLastLabel: true,
                tickPositions: [0.2, 0.4, 0.6, 0.8, 1.0]
            },

            tooltip: {
                shared: true,
                headerFormat: '<span style="font-size: 12px">{point.key}:</span>&nbsp;&nbsp;<b>{point.y:,.2f}</b>',
                pointFormat: '',
                useHTML: true
            },

            legend: {
                enabled: true,
                align: 'right',
                verticalAlign: 'top',
                y: 30,
                layout: 'vertical'
            },

            series: [{
                name: 'Grade Distribution',
                data: [.8, .95, .7, .35, .6, .3],
                pointPlacement: 'on',
                color: 'black',
                fillOpacity: 0.2
            }]

        });
    });

I looked for an interfering css in my code, but didn't find anything. Any idea what could be causing this?

Answer 1

There is no issue with the same code,

<div id="container2" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>

DEMO

Answer 2

You may have an old version of highchart. Downloading the latest version fixed the problem for me.