<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
$(function() {

  function addFilters() {
    var renderer = this.renderer,
      filter;

    filter = renderer.createElement('filter')
      .attr({
        id: 'main',
        'color-interpolation-filters': 'sRGB'
      }).add(renderer.defs);

    renderer.createElement('feGaussianBlur').attr({ in : 'SourceGraphic',
      stdDeviation: '3',
        result: 'blur',
    }).add(filter);
    renderer.createElement('feColorMatrix').attr({ in : 'blur',
      mode: 'matrix',
        result: 'cm',
        values: '1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -9'
    }).add(filter);

    renderer.createElement('feBlend').add(filter);
  }


  (function(H) {
    H.wrap(H.Series.prototype, 'render', function(p) {
      p.apply(this, [].slice.call(arguments, 1));
      if (this.group) {
        this.group.css({
          filter: 'url(#main)'
        });
      }
    });
  })(Highcharts)

  $('#container').highcharts({

    chart: {
      type: 'bubble',
      plotBorderWidth: 1,
      zoomType: 'xy',
      events: {
        load: function() {
          var chart = this;
          addFilters.call(chart);

          setTimeout(function() {
            chart.series[0].setData([
              [42, 38, 20],
              [6, 18, 1],
              [1, 93, 55],
              [57, 2, 90],
              [80, 76, 22],
              [11, 74, 96],
              [88, 56, 10],
              [30, 47, 49],
              [57, 62, 98],
              [4, 16, 16],
              [46, 5, 11],
              [22, 87, 89],
              [57, 91, 82],
              [45, 15, 98]
            ], true, {
            	duration: 2000
            });
          }, 1000);
        }
      }
    },

    title: {
      text: 'Highcharts bubbles with radial gradient fill'
    },

    xAxis: {
      gridLineWidth: 1
    },

    yAxis: {
      startOnTick: false,
      endOnTick: false
    },

    series: [{
      data: [
        [9, 81, 63],
        [98, 5, 89],
        [51, 50, 73],
        [41, 22, 14],
        [58, 24, 20],
        [78, 37, 34],
        [55, 56, 53],
        [18, 45, 70],
        [42, 44, 28],
        [3, 52, 59],
        [31, 18, 97],
        [79, 91, 63],
        [93, 23, 23],
        [44, 83, 22]
      ],
      marker: {
        fillColor: {
          radialGradient: {
            cx: 0.4,
            cy: 0.3,
            r: 0.7
          },
          stops: [
            [0, 'rgba(255,255,255,0.5)'],
            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
          ]
        }
      }
    }]

  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.