highcharts: dynamically define colors in pie chart highcharts: dynamically define colors in pie chart javascript javascript

highcharts: dynamically define colors in pie chart


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.


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.


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.