Highcharts Demo

author(s): Torstein Hønsi

by kzoon

HTML

<script src="http://code.highcharts.com/6.1.4/highcharts.src.js"></script>
<script src="http://code.highcharts.com/6.1.4/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.width/2;
            alignTo.y = point.plotY;
            alignTo.width = dataLabel.width;
            
            dataLabel.paddingLeftSetter(dataLabel.width/2 - options.padding);

            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: 'left',
                    enabled: true,
                    backgroundColor: 'rgba(200,180,100,0.5)',
                    format: '{point.name}<br/>{point.z}',
                    style: {
                        'text-anchor': 'middle'
                    },
                    borderWidth: 1,
                    borderColor: '#AAA'
                }
            }
        },

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