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?

jlbriggs · Accepted Answer · 2016-03-14T18:26:52.883

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

score -1 · Answer 2 · answered Mar 14 '16 at 16:42

Try like this.

plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            },
            bubble: {
              color: 'white',
              marker: {
                  fillColor: 'transparent'
              }
          }
        },

This will make the bubble transparent , let me know if anything else would you like to change

Highcharts Bubble Chart Hover Color

2 Answers2