Highcharts backgroundColor для нескольких графиков применяется только к одному графику

Следующий пример находится в jsfiddle со следующей ссылкой. http://jsfiddle.net/KWqU2/2/

Оба Highcharts имеют backgroundColor, установленные в конфигурации параметров диаграммы.

Проблема заключается в том, что независимо от того, что я установил для свойства backgroundColor, второй график по умолчанию имеет значение по умолчанию и игнорирует все настройки, которые я указал. Моя цель - прозрачность обоих фоновых диаграмм. Я попробовал backgroundColor: null, backgroundColor: 'Transparent', backgroundColor: 'rgba (255,255,255,0.1)' ничего не работает.

Любые идеи были бы хорошы.

Здесь код для обеих диаграмм:

var chart;  

// Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
                                },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
$('#container').highcharts({
        chart: {
                backgroundColor:'#000000',
                size:'100%'
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                size: 200,
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }

            }
        },
        credits:{enabled:false},
        exporting:{enabled:false},
        colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Supports You',   3],
                ['Opposes You',       1],
                ['Absent on Supporting',    0],
                ['Absent on Opposing',    0]
            ]
        }]
    });

    var chart2;

// Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: { cx: 0.4, cy: 0.2, r: 0.7
                                },
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
                ]
            };
        });
       $('#container2').highcharts({
        chart2: {
                 backgroundColor:'Transparent',
                 size:'100%'
        },
        legend:{
            enabled: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                size: 200,
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }

            }
        },
        credits:{enabled:false},
        exporting:{enabled:false},
        colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'],
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
               ['Supports You',   3],
                ['Opposes You',       10],
                ['Absent on Supporting',    0],
                ['Absent on Opposing',    0]
            ]
        }]
    });