Set bubble transparency in bubble chart? - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bubble Chart

Description

Set bubble transparency in bubble chart?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts test tool</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script> 
      <script type="text/javascript">
    $(function(){/*from   www  .  j  a  v a 2 s .  c  om*/
$(function() {
    $('#container').highcharts({
        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },
        title: {
            text: 'Highcharts bubbles with radial gradient fill'
        },
        xAxis: {
            gridLineWidth: 1
        },
        yAxis: {
            startOnTick: false,
            endOnTick: false
        },
        series: [{
            data: [
                [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, 10, 11],
                [22, 87, 89],
                [57, 91, 82],
                [45, 15, 98]
            ],
            color: 'rgba(170,70,67,1)',
            marker: {
              fillOpacity:0.3
            },
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://github.highcharts.com/v3.0Beta/highcharts.js"></script> 
      <script src="https://github.highcharts.com/v3.0Beta/highcharts-more.js"></script> 
      <div id="container" style="height: 400px; width: 600px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials