CODEWITHSUNDEEP
javascripthtmlcsshighcharts
Jacques
Jacques

Reputation: 1709

Highcharts Bubbles - how do I change bubble background and line color?

I am trying to change the background and line colors of a bubble series.

At the moment, it is the default blue with dark blue border. I want the border to be white and the bubble background to be transparent. Any ideas on how I can achieve this?

Thanks

Jacques

Upvotes: 0

Views: 2534

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You can set some of the plotOptions.bubble-options to achieve this. Notably:

plotOptions: {
    bubble: {
        color: 'white',
        marker: {
            fillColor: 'transparent'
        }
    }
}

Here we set the default color to white, and the marker fill color to transparent. Note that this will set the color for all series. If you want to specify it on a series-level you'd just pass the color option to each series.

See this JSFiddle demonstration of how it looks.

The look and feel of hovering and selecting can be controlled with plotOptions.bubble.marker.states. Check the documentation for details.

Upvotes: 4

Related Questions