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>

CSS

.highcharts-bubble-series .highcharts-data-label {
  text-anchor: middle
}

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": {
      "reflow": false,
      "type": "bubble",
      "animation": false,
      "borderRadius": 0,
      "backgroundColor": "rgba(255,255,255,1)",
      "plotBackgroundColor": "rgba(255,255,255,0)",
      "spacingBottom": 10,
      "scAnimateChanges": true
    },
    "drilldown": {},
    "title": {
      "text": "",
      "margin": 0
    },
    "subtitle": {
      "text": "",
      "margin": 0
    },
    "legend": {
      "margin": 10,
      "backgroundColor": "rgba(255,255,255,0)",
      "borderWidth": 1,
      "borderColor": "rgba(177,177,177,1)",
      "squareSymbol": false,
      "symbolRadius": 0,
      "itemStyle": {
        "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
        "fontSize": "11px",
        "fontWeight": "normal",
        "color": "rgba(60,60,60,1)"
      }
    },
    "tooltip": {
      "enabled": true,
      "backgroundColor": "rgba(255,255,255,1)",
      "style": {
        "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
        "fontSize": "11px",
        "color": "rgba(60,60,60,1)",
        "whiteSpace": "normal"
      },
      "backgroundColor": "rgba(255,255,255,1)",
      "hideDelay": 10,
      "outside": true
    },
    "plotOptions": {
      "bubble": {
        "animation": false,
        "shadow": false,
        "stickyTracking": false,
        "zIndex": 13,
        "dataLabels": {
 ...