How to change background color of every single bubble in highcharts?

Question

I am trying to get user inputs and then draw a bubble chart with 100 bubbles. How can I change the background color of bubbles to different colors(up to 10 colors)?
Below is my javascript code,

        <script>
            function generateChart() {
                var my_arr = [];
                var Stakeholders = [];
          
                $('td').each(function () {
                    my_arr.push($(this).children().val());
                });

                var length = my_arr.length;

                for (var i = 0; i < length - 2; i++) {
                    var Stakeholder = new Object();
                    Stakeholder.name = my_arr[i] || 'Unknown';
                    Stakeholder.x = parseFloat(my_arr[i + 1] || 5);
                    Stakeholder.y = parseFloat(my_arr[i + 2] || 5);
                    Stakeholders.push(Stakeholder);
                    i += 2;
                }
                drawChart(Stakeholders);
            };

            function drawChart(Stakeholders) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'bubble',
                        plotBorderWidth: 1,
                        zoomType: 'xy',
                        spacingTop: 40,
                        spacingRight: 40,
                        spacingBottom: 40,
                        spacingLeft: 40,
                        borderWidth: 1
                    },
                    plotOptions: {
                        column: {
                            colorByPoint: true
                        }
                    },

                    series: [{
                        data: Stakeholders
                    }]

                });
            };
        </script>

Answer 1

I'm not sure if you want to assign specific colors to specific bubbles or just randomly assign colors, but you can add a color: 'somecolor' property to each bubble object in the series.

Fiddle here (see lines 96-110).

Or, you could create an array of colors, loop through your bubble series, and randomly assign a color to each bubble object.

Hope this helps.

Answer 2

I should have added a property to Stakeholder:

var colors = ['#98d9c2', '#ffd9ce', '#db5461', '#f5853f', '#b497d6', '#dc965a', '#FF9655', '#FFF263', '#6AF9C4', "000"];
for (var i = 0; i < length - 2 ; i++) {
            var Stakeholder = new Object();
            var color = parseInt(Math.random() * 10);
            Stakeholder.name = my_arr[i] || 'Unknown';
            Stakeholder.x = parseFloat(my_arr[i + 1]);
            Stakeholder.y = parseFloat(my_arr[i + 2]);
            Stakeholder.z = 5;
            Stakeholder.color =  colors[color];
            Stakeholders.push(Stakeholder);
            i += 2;
}