[Solved]-highcharts opacity when "bubbles" are stacked-Highcharts

There are a few approaches you could use:

1. Using the opacity the way it is

   1.1. Keep fillOpacity, but vary the # of elements:

   • Keeping the fillOpacity: 0.01:

   • How many elements it is necessary to get a resultant 0.99 opacity?

   function calculateTimes(opacity, overlappingOpacity) {
       var times = 1;
       var currentOpacity = opacity;
       while (currentOpacity < overlappingOpacity) {
           currentOpacity += (1 - currentOpacity) * opacity;
           times++;
       }
       return times;
   }
   calculateTimes(0.01, 0.99); //Gives you 459 elements
   

   Fiddle for 459 elements

   1.2. Keep the # of elements, but vary fillOpacity

   • Keeping the 100 elements:

   • How much should fillOpacity be set to get a resultant 0.99 opacity?

   function calculateOverlappedOpacity(opacity, times) {
       return times == 1 ? opacity : opacity + (1 - opacity) * calculateOverlappedOpacity(opacity, times - 1);
   }
   
   function calculateOpacityFor(resultantOpacity, times) {
       for (var i = 0.0001; i <= 1; i += 0.0001) {
           if (calculateOverlappedOpacity(i, times) >= resultantOpacity) {
               return i;
           }
       }
       return 1;
   }
   calculateOpacityFor(0.99, 100) //Gives you a fillOpacity of 0.0451
   

   Fiddle for fillOpacity: 0.0451

2. Using the opacity the way you thought it worked

   • Use 1 element set with a desired fillOpacity based on the element quantity:

   • How much should the resultant opacity be (based on the quantity of elements)?

   0.01 * chartData.length
   

   Fiddle for a simulation of the expected opacity algorithm