Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 400px;"></div>
<button id="btn">
  resize
</button>

CSS

.highcharts-tooltip h3 {
  margin: 0.3em 0;
}

#container {
  width: 200px;
  // width: 800px;
}

JavaScript

document.getElementById('btn').onclick = function() {
  var chart = Highcharts.charts[0];
  chart.setSize(chart.chartWidth === 200 ? 800 : 200);
}

function applyEllipsis() {
  var series = this.series[0];
  var options = series.options.dataLabels;

  this.series[0].points.forEach(p => {
    var r = p.marker.radius;
    var label = p.dataLabel;
    var text = label.text.textStr;
    var bbox = label.getBBox(true);

    while (bbox.width > 2 * r && text.length !== 1) {
      text = text.slice(0, -1);
      p.dataLabel.attr({
        text: text + '\u2026'
      });
      bbox = label.getBBox(true);
    }

    p.dataLabel.align({
      width: bbox.width,
      height: bbox.height,
      align: options.align,
      verticalAlign: options.verticalAlign
    }, null, p.dlBox);

  });
}

Highcharts.chart('container', {
  chart: {
    type: 'bubble',
    events: {
      load: applyEllipsis,
      redraw: applyEllipsis
    }
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{point.name}lghh',
        overflow: false,
        crop: false,
        style: {
          textOutline: false
        },
        allowOverlap: true
      }
    }
  },

  series: [{
    data: [{
        x: 95,
        y: 95,
        z: 13.8,
        name: 'BE',
        country: 'Belgium'
      }, {
        x: 86.5,
        y: 102.9,
        z: 14.7,
        name: 'DE',
        country: 'Germany'
      },

      {
        x: 80.8,
        y: 91.5,
        z: 15.8,
        name: 'FI',
        country: 'Finland'
      }, {
        x: 80.4,
        y: 102.5,
        z: 12,
        name: 'NL',
        country: 'Netherlands'
      }, {
        x: 80.3,
        y: 86.1,
        z: 11.8,
        name: 'SE',
        country: 'Sweden'
      }, {
        x: 78.4,
        y: 70.1,
        z: 16.6,
        name: 'ES',
        country: 'Spain'
      }, {
        x: 74.2,
        y: 68.5,
        z: 14.5,
        name: 'FR',
        country: 'France'
      }, {
        x:...