Unable to get property '1' of undefined or null reference for Highcharts in IE8

Question

I'm trying to use a Highchart in IE8 but I get the error:

Unable to get property '1' of undefined or null reference

According to the website, Highcharts works down to IE6, so should work fine in IE8... It works fine in all other browsers I've tested on.

Any ideas where the problem is?

---

I've set a fiddle up here that errors when tested in IE8: http://jsfiddle.net/w1ebp44w/

(probably best to test the full result in IE: http://jsfiddle.net/w1ebp44w/embedded/result/)

The code is as follows:

Highcharts.theme = {
    colors: [
        '#5e2750',
        '#eb9700',
        '#007c92',
        '#a8b400'
    ]
};

var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

// Radialize the colors
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            //[1, Highcharts.Color(color).brighten(-0.1).get('rgb')] // darken
        ]
    };
});

// Build the chart
var options = {
    chart: {
        //renderTo: 'chart',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        backgroundColor: 'transparent',
        spacingTop: 0,
        spacingLeft: 0,
        spacingRight: 0,
        spacingBottom: 0,
        animation: false,
        shadow: false,
        type: 'pie'
    },
    credits: {
        enabled: false
    },
    title: {
        text: null
    },
    tooltip: {
        enabled: false,
        formatter: function() {
            return '<b>' + this.point.name + '</b> : ' + Math.round(this.percentage) + '%';
        }
    },
    plotOptions: {
        pie: {
            animation: true,
            allowPointSelect: false,
            dataLabels: {
                enabled: true,
                //format: '<b style="font-weight:400;font-family:VodafoneBold;">{point.name}</b> {point.y}/{point.total} ({point.percentage:.1f}%)',
                formatter: function(){
                    return '<b style="font-weight:400;font-family:Arial;">' + this.point.name + '</b> ' + this.point.y + '/' + this.point.total + ' (' + this.point.percentage.toFixed(0) + '%)';
                },
                style: {
                    "color": "#666",
                    "fontSize": "18px",
                    "fontWeight": "400",
                    "fontFamily": "Arial"
                }
            },
            shadow: false
        },
        series: {
            states: {
                hover: {
                    enabled: false
                }
            }
        }
    },
    series: [{
        data: [{
            name: 'Basic',
            x: 0,
            y: Math.round( 1 )
        }, {
            name: 'Intermediate',
            x: 0,
            y: Math.round( 2 )
        }, {
            name: 'Advanced',
            x: 0,
            y: Math.round( 3 )
        }, {
            name: 'Expert',
            x: 0,
            y: Math.round( 4 )
        }]
    }]
};

$(document).ready(function(){

    $('#chart').highcharts(options).highcharts();

});

Answer 1

IE8 has issues with trailing commas

    stops: [
        [0, color], <-- remove the trailing comma