highcharts: dynamically define colors in pie chart

Question

I'm trying to dynamically define color for each seria depending of their type. Below is my code which doesn't work but showing what I'm trying to do. I would like to define colour for certain type eg:

if type = 'IS' then color =  '#FFCACA'

I cannot expect that ret will have all types so I need to know which types are returned in ret and then asociate color to certain type.

How to do that?

this is code since data received:

success: function (ret) {


    $(function () {
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'divPie_' + id,
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: true,
                    width: 350,
                    height: 350
                },
                title: {
                    text: refrigname
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Current selection',
                    color: (function () {
                            switch (ret.type) {
                                case 'AB': return '#C6F9D2'; 
                                case 'BC': return '#CCCCB3'; 
                                case 'CL': return '#CECEFF'; 
                                case 'CI': return '#FFCAFF'; 
                                case 'HB': return '#D0CCCD'; 
                                case 'ON': return '#FFCC99'; 
                                case 'PM': return '#FFCBB9'; 
                                case 'SR': return '#EAEC93'; 
                                case 'TS': return '#D7FBE6'; 
                                case 'IS': return '#FFCACA'; 
                                case 'FREE': return '#00FF00'; 
                            }
                    }),
                    data: (function () {
                        var arr = [];
                        $(ret).each(function () {
                            var labelname = "";
                            switch (this.type) {
                                case "AB": labelname = "Antibodies"; break;
                                case "BC": labelname = "Bacteria"; break;
                                case "CL": labelname = "Cell lines"; break;
                                case "CI": labelname = "Custom items"; break;
                                case "HB": labelname = "Hybridoma"; break;
                                case "ON": labelname = "Oligonucleotides"; break;
                                case "PM": labelname = "Plasmids"; break;
                                case "SR": labelname = "siRNA"; break;
                                case "TS": labelname = "Tissue samples"; break;
                                case "IS": labelname = "Isolates"; break;
                                case "FREE": labelname = "Free space"; break;
                            }
                            arr.push([labelname, this.cnt]);
                        })
                        return arr;
                    })()
                }]
            });
        });
    });


}

In stead of using switches, a map would be one zillion times faster (This is not part of the problem/solution) `var colors = { 'AB': '#C6F9D2','BC': '#CCCCB3' } return colors[this.type];` — EricG, Dec 14 '12 at 10:36
What are you trying to do ? You have a pie chart, so the serie type will always be `pie`. — Ricardo Alvaro Lohmann, Dec 14 '12 at 16:29

Ricardo Alvaro Lohmann · Accepted Answer · 2012-12-14T16:42:42.453

For a pie chart you have to set the slice color inside data.
And you have to use the point name and not serie type, serie type will always be "pie".

For this you can use javascript object notation to store which color each serie will have.
It's fastar than use a switch.

var getColor = {
    'AB': '#C6F9D2',
    'BC': '#CCCCB3',
    'CL': '#CECEFF', 
    'CI': '#FFCAFF', 
    'HB': '#D0CCCD', 
    'ON': '#FFCC99', 
    'PM': '#FFCBB9', 
    'SR': '#EAEC93', 
    'TS': '#D7FBE6', 
    'IS': '#FFCACA', 
    'FREE': '#00FF00'
};

series: [{
    type: 'pie',
    name: 'Current selection',
    data: [
        {
            name: 'AB',
            y: 45.0,
            color: getColor['AB']
        }, {
            name: 'BC',
            y: 26.8,
            color: getColor['BC']
        }, {
            name: 'CL',
            y: 12.8,
            sliced: true,
            selected: true,
            color: getColor['CL']
        }, {
            name: 'CI',
            y: 8.5,
            color: getColor['CI']
        }, {
            name: 'HB',
            y: 6.2,
            color: getColor['HB']
        }, {
            name: 'ON',
            y: 0.7,
            color: getColor['ON']
        }
    ]
}]

You can see it working here.

@RicardoAlvaroLohmann .. how can we use this if we are getting data dynamically from mysql in JSON format ? series: [{ type: 'pie', name: 'Execution Summary', data:[] }] }; function getAjaxData(id) { $.getJSON("data/pie.php", {id: id}, function(json) { options.series[0].data = json; chart = new Highcharts.Chart(options); }); } — coolDude, Apr 04 '16 at 14:59

score 0 · Answer 2 · answered Dec 14 '12 at 08:56

The return statement you have there is returning from the function being passed to the each function, not the color function. Also, there's no need to use a switch case for this in JavaScript.

EDIT: Try something like this

series: [{
    type: 'pie',
    name: 'Current selection',
    color: {
        'AB': '#C6F9D2',
        'BC': '#CCCCB3',
        'CL': '#CECEFF',
        'CI': '#FFCAFF',
        'HB': '#D0CCCD',
        'ON': '#FFCC99',
        'PM': '#FFCBB9',
        'SR': '#EAEC93',
        'TS': '#D7FBE6',
        'IS': '#FFCACA',
        'FREE': '#00FF00'
    }[this.type]
}]

It's not really clear from your code what ret is, so I'm not sure the above code works, but it should give you a rough idea of how it can be done.

score 0 · Answer 3 · edited May 23 '17 at 11:33

Why not set the color property when you push the data series to the chart? Without seeing what you are using to build your series object I can only provide some psuedo-code:

for each seriesItem in seriesList (
     set highcharts.series[seriesItem].name = seriesList[seriesItem].seriesTitle
     set highcharts.series[seriesItem].data = seriesList[seriesItem].data
     set highcharts.series[seriesItem].Note = seriesList[seriesItem].extraInfo
     set highcharts.series[seriesItem].color = switch (seriesList[seriesItem].type) {
                                case 'AB': return '#C6F9D2'; 
                                case 'BC': return '#CCCCB3'; 
                                case 'CL': return '#CECEFF'; 
                                case 'CI': return '#FFCAFF'; 
                                case 'HB': return '#D0CCCD'; 
                                case 'ON': return '#FFCC99'; 
                                case 'PM': return '#FFCBB9'; 
                                case 'SR': return '#EAEC93'; 
                                case 'TS': return '#D7FBE6'; 
                                case 'IS': return '#FFCACA'; 
                                case 'FREE': return '#00FF00'; 
                            }
     )

Essentially you preprocess the data series elements. See this question for explicit formatting. You can set the color property of a series - you do not have to depend on the default HighCharts color list or a custom color list as described in another answer. Note that the color property is not listed in the HighCharts API reference but you can use it.

Arif · Answer 4 · 2012-12-14T10:32:31.827

-1

I use Highcharts without giving any color property as it is using their own library for auto select color. Use below, hope it will work for u

series: [{
type: 'pie',
name: 'Current selection',
data: [
       ['Name_1',  537],
       ['Name_2',  181],
       ['Name_3',  156]
]
}]

we can set highchart custom color by setOption function

Highcharts.setOptions({
  colors: ['#F64A16', '#0ECDFD', '#FFF000']
});

edited Dec 14 '12 at 10:32

answered Dec 14 '12 at 10:12

Arif

1,222
6
29
60

but I HAVE TO to define specific color for particular ['Name_1', 537]. Now, colors are defined randomly which is inappropriate for my situation. – dllhell Dec 14 '12 at 10:19
Shams I'v also edited questions in order to become more clear, problem is that color property is not iterated as data property. Maybe I'm thinking in wrong way... – dllhell Dec 14 '12 at 11:07

highcharts: dynamically define colors in pie chart

4 Answers4

Linked