Bubble with text in bubble chart - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

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

Description

Bubble with text 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   w ww.ja v a 2s  .c om
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bubble'
        },
        title: {
            text: 'Highcharts bubbles problem'
        },
        plotOptions: {
        },
        xAxis: {
            max: 80
        },
        yAxis: {
            min: -80,
            max: 80
        },
        series: [{
            dataLabels: {
                enabled: true,
                x:40,
                formatter:function() {
                    return this.point.name;
                },
                style:{color:"black"}
            },
            data: [{
                "x": 23,
                "y": 22,
                "z": 200,
                "name":"point1"
            }, {
                "x": 43,
                "y": 12,
                "z": 100,
                "name":"point2"
            }]
        }]
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="http://github.highcharts.com/v3.0Beta/highcharts.js"></script> 
      <script src="http://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