make bubble chart selected a bubble on load - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

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

Description

make bubble chart selected a bubble on load

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Stackoverflow highcharts select</title> 
      <style>

.highcharts-point-select{
   stroke:red;//from w  ww  .j av  a2s. c  om
   fill:red;
}


      </style> 
   </head> 
   <body translate="no"> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div> 
      <p class="num">103</p> 
      <p class="num">89</p> 
      <script>
      $("p.num").show();
 $("p.num").click(function(){
   var value = parseInt($(this).text());
Highcharts.chart('container', {
    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy',
         events:{
         load:function(){
      var points = this.series[0].points;
           points.forEach(function(point){
             if(point.z === value)
               point.select();
           })
    }
        }
    },
    title: {
        text: 'Highcharts bubbles with radial gradient fill'
    },
    xAxis: {
        gridLineWidth: 1
    },
    yAxis: {
        startOnTick: false,
        endOnTick: false
    },
 plotOptions: {
        series: {
            allowPointSelect: true,
            marker: {
                states: {
                    select: {
                        fillColor : 'orange'
                    }
                }
            }
        }
    },
    series: [{
        data: [
            [9, 81, 103],
            [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]
        ],
        color: 'green',
    }]
})
});
      //# sourceURL=pen.js
    
      </script>  
   </body>
</html>

Related Tutorials