Highcharts - Pie Chart change slice colors dynamically

Question

The chart calls in JSON file that hold a string(color) and integer(count). I want to change the color of the each slice in a pie chart according to what the JSON file holds. So if the JSON file is [["Green",1],["Red",44],["Yellow",30]] I would like the the "Green" slice to have the color of green...etc. I've tried:

plotOptions: {
    pie: {
        //colors: ['#739600', '#bb0826', '#fcc60A'],
        formatter: function () {
                if ('Green' === this.value) {
                    return '<span style="fill: #739600;">' + this.value + '</span>';
                } 
                else if ('Red' === this.value) {
                    return '<span style="fill: #bb0826;">' + this.value + '</span>';
                }
                else if ('Yellow' === this.value) {
                    return '<span style="fill: #fcc60A;">' + this.value + '</span>';
                }
            }, ...

It's not working how I expected. http://jsfiddle.net/LazerickL/bvaxmcLr/4/

Any help would be appreciated.

UPDATE

I had to restructure my JavaScript to call $.getJSON function. So, how would I proceed to implement the color slices for my latest code below? Thanks for any help!

$(document).ready(function() {
var options = {
    chart: {
        renderTo: 'containter',      
        defaultSeriesType: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: null                  
    },

    credits: {
        enabled: false              
    },
    tooltip: {
    pointFormat:                    
    '{series.name}: <b>{point.y}</b>'
},

plotOptions: {
    pie: {
        //colors: ['#739600', '#bb0826', '#fcc60A'],
        allowPointSelect: true,
        cursor: 'pointer',
        depth: 30, 
        showInLegend: true,         
        dataLabels: {
            enabled: true,
            color: '#000000',
            connectorColor: '#000000',
            formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + this.point.y;
            }
        }
    }
},
    series: [{
        type: 'pie',
        name: 'Amount',
        data: []
    }]
}

$.getJSON("js/test.json", function (json) {
    options.series[0].data = json;
    var chart = new Highcharts.Chart(options);
});

});

Answer 1

To set your colors on your pies you'll need to update how you're pushing things into the data array to include the color of your pie. I accomplish this by adding a field to your data array but you could use an if statement like you had in the function if you prefer. Here is an updated fiddle: http://jsfiddle.net/bvaxmcLr/8/

Also, your placement of the formatter function is invalid. That formatter javascript only applies to data labels as far as I know.

The important change from your script is removing the formatter function and updating to this to push the color value onto each data point:

  var data={'d':[
        {'Status_Color':'Green', 'Corrective_Action_ID':3},
        {'Status_Color':'Red', 'Corrective_Action_ID':5},
        {'Status_Color':'Yellow', 'Corrective_Action_ID':10},
    ]};
     $.each(data.d, function (key, value) {
        var colorVal = '';
        if(value.Status_Color=='Green'){
            colorVal = '#739600';
        }
        if(value.Status_Color=='Red'){
            colorVal = '#bb0826';
        }
        if(value.Status_Color=='Yellow'){
            colorVal = '#fcc60A';
        }

        var temp = {name:value.Status_Color, color:colorVal, y:value.Corrective_Action_ID};
        options.series[0].data.push(temp);

    })

Here is the whole script:

$(function () {

$(document).ready(function () {

    var options = {

    chart: {
        renderTo: 'container',
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: null
    },
    subtitle: {
        text: null
    },
    credits: {
        enabled: false
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y:.1f}</b>'
    },
    plotOptions: {
        pie: {

            depth: 45,
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    },
    series: [{
        type: 'pie',
        name: 'Amount',
        data: []
    }]

    }
    var data={'d':[
        {'Status_Color':'Green', 'Corrective_Action_ID':3},
        {'Status_Color':'Red', 'Corrective_Action_ID':5},
        {'Status_Color':'Yellow', 'Corrective_Action_ID':10},
    ]};
     $.each(data.d, function (key, value) {
        var colorVal = '';
        if(value.Status_Color=='Green'){
            colorVal = '#739600';
        }
        if(value.Status_Color=='Red'){
            colorVal = '#bb0826';
        }
        if(value.Status_Color=='Yellow'){
            colorVal = '#fcc60A';
        }

        var temp = {name:value.Status_Color, color:colorVal, y:value.Corrective_Action_ID};
        options.series[0].data.push(temp);

    })

    chart = new Highcharts.Chart(options);

});

});