Highcharts Demo

author(s): Torstein Hønsi

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto;"></div>

JavaScript

$(function () {
    
  /*  (function(H) {
        H.wrap(H.seriesTypes.bubble.prototype, 'alignDataLabel', function(p, point, dataLabel, options, alignTo, isNew) {            
            alignTo = alignTo || {x: 0, y: 0, width: 0, height: 0};   
            
            alignTo.x = point.plotX - dataLabel.padding;
            alignTo.y = point.plotY;
            alignTo.width = dataLabel.width;
                       
            H.Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
        });
    }(Highcharts))
  */  
    $('#container').highcharts({

        chart: {
            type: 'bubble',
            plotBorderWidth: 1,
            zoomType: 'xy'
        },

        title: {
            text: 'Highcharts with negative bubbles'
        },

        xAxis: {
            gridLineWidth: 1
        },

        yAxis: {
            startOnTick: false,
            endOnTick: false
        },
        plotOptions: {
            series: {
                dataLabels: {
                    align: 'center',
                    enabled: true,
                    format: '{point.name}<br/>{point.z}',
                    style: {
                        //'textAnchor': 'center'
                    },
                    borderWidth: 1,
                    borderColor: '#AAA'
                }
            }
        },

        series: [{
            data: [{
                name: 'Name 1',
                x: 20,
                y: 20,
                z: 180
            }, {
                name: 'Short',
                x: 40,
                y: 40,
                z: 200
            }, {
                name: 'Longer Name',
                x: 60,
                y: 20,
                z: 190
            }, {
                name: 'Dummy',
                x: 10,
                y: 10,
                z: 1
            }

            ]
        }]

    });
});