Avoid overlapping in bubble chart - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

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

Description

Avoid overlapping 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">
    window.onload=function(){/*from   ww w .  j  av  a2  s. c om*/
Highcharts.chart('container', {
  chart: {
    type: 'bubble',
    plotBorderWidth: 1
  },
  xAxis: {
    labels: {
      overflow: 'justify'
    },
    lineColor: "#1E232A",
    tickColor: "#1E232A",
    type: "category"
  },
  series: [{
    name: "BLUE",
    pointPlacement: -0.25,
    data: [{
      y: 65,
      z: 13.8,
      name: 'Belgium'
    }, {
      y: 32.9,
      z: 14.7,
      name: 'Germany'
    }, {
      y: 11.5,
      z: 15.8,
      name: 'Finland'
    }]
  }, {
    name: "BLACK",
    data: [{
      y: 65,
      z: 44.8,
      name: 'Belgium'
    }, {
      y: 32.9,
      z: 66.7,
      name: 'Germany'
    }, {
      y: 11.5,
      z: 77.8,
      name: 'Finland'
    }]
  }, {
    name: "GREEN",
    pointPlacement: 0.25,
    data: [{
      y: 65,
      z: 54.8,
      name: 'Belgium'
    }, {
      y: 32.9,
      z: 56.7,
      name: 'Germany'
    }, {
      y: 11.5,
      z: 37.8,
      name: 'Finland'
    }]
  }]
});
    }

      </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>  
   </body>
</html>

Related Tutorials