Highcharts Bubble Chart Hover Color

Question

I am using Highcharts to create a bubble chart and want the color of each bubble to be different. I am setting the color like this:

series: [{
            data: [
                { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium', color: Highcharts.getOptions().colors[0]},
                { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany', color: Highcharts.getOptions().colors[1] }]
}]

http://jsfiddle.net/4go2otar/

But when I hover on each node the color of the bubble changes to the default blue. Is there a way to set the hover color, or disable the hover color change altogether?

Answer 1

Instead of mapping the colors yourself like that, you can simply use the built in colorByPoint: true option in the plot options:

plotOptions: {
  series: {
    colorByPoint:true,
    ...
  }
}

Example:

• http://jsfiddle.net/jlbriggs/4go2otar/2/

This way, the chart handles all of the interactions already. By just updating the top level color, you aren't affecting all of the other settings that go into the color determination.

.

If the default colors are not the colors you want, or are not in the order that you want, you can define the colors array yourself as well:

• http://api.highcharts.com/highcharts#colors

All that said, it bears pointing out the this is usually not a great idea, unless the colors actually mean something useful. Making everything a different color for the sake of making everything a different color usually just adds visual clutter, making it harder to ingest the information without adding any actual benefit. FWIW