How to change highmap bubble color - highcharts

Question

I am trying to color the bubbles based on the name of the cities. Something like if this.point.capital == Montgomery & this.point.capital == Juneau; color = "red". But I cannot add this if function to the color attribute. Can you help me out?
Thanks!!!!
series: [{
name: 'Basemap',
mapData: map,
borderColor: '#606060',
nullColor: 'rgba(200, 200, 200, 0.2)',
showInLegend: false
}, {
name: 'Separators',
type: 'mapline',
data: H.geojson(map, 'mapline'),
color: '#101010',
enableMouseTracking: false
}, {
type: 'mapbubble',
dataLabels: {
enabled: true,
format: '{point.capital}'
},
name: 'Cities',
data: data,
maxSize: '12%',
color: H.getOptions().colors[0]
}]
http://jsfiddle.net/oufwhmz0/

Answer 1

Do this for each bubble individually (not the series as a whole) in the data array prior to initiating the chart. For example extending your code (JSFiddle):
function determineColor(entry) {
if(entry.capital == "Montgomery")
return "#FF00FF";
else if(entry.capital == "Salt Lake City")
return "#00FF00";
return null;
}
// Add series with state capital bubbles
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=us-capitals.json&callback=?', function (json) {
var data = [];
$.each(json, function (ix, entry) {
entry.z = entry.population;
entry.color = determineColor(entry); // Added
data.push(entry);
});
// ... rest as usual
});
This just sets the color for each entry (which will be a bubble), as defined by the determineColor function.