Highcharts: Change color of bubbles in one serie

Question

Can I set different colors for a serie in a bubble chart? I try setting the property "color" but not work.

        data: [{
            x: 23,
            y: 22,
            z: 200,
            name:"point1",
            color: 'red'
        }, {
            x: 43,
            y: 12,
            z: 100,
            name:"point2",
            color:'yellow'
        }]

Maybe I can use a label in the serie but I prefer the change the bubble, it is possible?

dataLabels: {
      enabled: true,
      color: 'red'
}

This is my jsfiddle: http://jsfiddle.net/tqVF8/2/

score 9 · Answer 1 · answered Aug 13 '13 at 15:13

In your case, you can add the property "fillColor"

 data: [{
            x: 23,
            y: 22,
            z: 200,
            name:"point1",
            color: 'red',
            fillColor : 'red'
        }, {
            x: 43,
            y: 12,
            z: 100,
            name:"point2",
            color:'yellow',
            fillColor : 'yellow'
        }]

example: http://jsfiddle.net/tqVF8/17/

RoboKozo · Accepted Answer · 2013-04-15T16:14:09.177

8

Each point that needs a unique color will need its own series object. It's a little weird, but this works:

    series: [{
        data: [{
            x: 23,
            y: 22,
            z: 200,
            name:"point1"
        }, {
            x: 43,
            y: 12,
            z: 100,
            name:"point2",
        }],
        color: "yellow"
    },{
        data: [{
            x: 50,
            y: 22,
            z: 150,
            name:"point3"
        }, {
            x: 43,
            y: -30,
            z: 100,
            name:"point4",
        }],
        color: "blue"
    }]

Check out this demo from the site: http://www.highcharts.com/demo/bubble-3d

And here is a js fiddle with your example: http://jsfiddle.net/Robodude/tqVF8/7/

edited Apr 15 '13 at 16:14

answered Apr 15 '13 at 15:27

RoboKozo

4,981
5
51
79

Thanks, but is there another way? And following your example the color can't be set, the color must be outside of data, like this: http://jsfiddle.net/tqVF8/6/ – Lorenzo Apr 15 '13 at 16:02
yeah you're absolutely correct, sorry it was a copy-paste fail. I'll update the code in the answer but I'm afraid I don't know another way of doing it. good luck :) – RoboKozo Apr 15 '13 at 16:13
I use your example any way :P thank you. I just add a disabled legend: http://jsfiddle.net/tqVF8/8/ – Lorenzo Apr 15 '13 at 16:37

Highcharts: Change color of bubbles in one serie

2 Answers2