Change point style on hover over other onpage element in bubble chart - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

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

Description

Change point style on hover over other onpage element in bubble chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//w  w  w.  j a v  a  2 s  .  c  o  m
    $('#container').highcharts({
        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },
        title: {
            text: 'Highcharts Bubbles'
        },
        series: [{
            data: [{x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 0},
                  {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 1},
                   {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 2},
                   {x: Math.random() * 100, y: Math.random() * 100, z: Math.random() * 100, id: 3}
                  ]
        }]
    });
    $('.aSpan').hover(function(){
        var myId = parseInt($(this).attr('id'));
        var series = Highcharts.charts[0].series[0];
         $.each(series.points, function(_,point){
            if (point.id === myId){
                point.update({marker: {fillColor: 'red'}});
            }
     });
   });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div> 
      <span id="0" class="aSpan">Span 0</span> 
      <span id="1" class="aSpan">Span 1</span> 
      <span id="2" class="aSpan">Span 2</span> 
      <span id="3" class="aSpan">Span 3</span>  
   </body>
</html>

Related Tutorials