prevent from falling out bubble in bubble chart? - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

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

Description

prevent from falling out bubble 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 ww  w .  j  a  v a2  s .  com*/
$(function() {
  $("#btn").click(function () {
    $("#container").highcharts().destroy();
  })
  $('#container').highcharts({
    chart: {
      type: 'bubble',
      plotBorderWidth: 1,
      zoomType: 'xy'
    },
    title: {
      text: 'Highcharts bubbles with radial gradient fill'
    },
    xAxis: {
      minPadding: 0,
      gridLineWidth: 1,
      min: 0
    },
    yAxis: {
      startOnTick: false,
      endOnTick: false,
      min: 0
    },
    series: [{
      data: [
        [42, 38, 500],
        [6, 18, 1],
        [0, 93, 505],
        [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]
      ]
    }]
  });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/5.0.6/highcharts.js"></script> 
      <script src="https://code.highcharts.com/5.0.6/highcharts-more.js"></script> 
      <div id="container" style="height: 400px; margin: 0 auto"></div> 
      <button id="btn"> destroy </button>  
   </body>
</html>

Related Tutorials