Search code examples
javascripthighchartsbubble-chart

Highcharts: Change color of bubbles in one serie


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/


Solution

  • 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/