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.