Text Ellipsis in bubble chart

Question

i'm using bubble chart from Highcharts, the label text inside of the bubbles is dynamic and sometimes can be bigger than the bubble itself,

I wonder if there's a way to make the text ellipsis according to the size of the bubble that contain it?

  containerOptions = {
        chart: {
            type: 'bubble',
            renderTo: $(container)[0],
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {

                        var chart = this,
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    data: [
                                        {name: 'Dogs', y:2, x:10, z: 7, drilldown: true},
                                        {name: 'Cats', y:4, x:12, z: 7}
                                    ]
                                },
                                'Dogs': {
                                    name:"Dogs",
                                    data: [
                                        {name: 'Pitbull', y:3.7, x:7.6, z: 5, drilldown: false},
                                        {name: 'German shepherd', y:6.7, x:6.9, z: 5, drilldown: false}
                                    ]
                                }
                            },
                            series = drilldowns[e.point.name];
                        chart.showLoading('Loading..');
                        setTimeout(function () {
                            chart.hideLoading();
                            chart.addSeriesAsDrilldown(e.point, series);
                        }, 1000);

                    }
                }
            }
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    style: { color: 'red' },
                    format: '{point.name}'

                }
            }
        },
        series: [{
            name: 'Things',
            colorByPoint: true,
            data: [{
                name: 'Animals',
                y: 5,
                x: 1,
                z: 9,
                drilldown: true
            }, {
                name: 'Fruits',
                y: 2,
                x: 9,
                z: 9,
                drilldown: false
            }
            ]
        }],

        drilldown: {
            series: [],
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    y: 0,
                    x: 0
                }
            }
        }

    }
}

Answer 1

You can loop through the data labels on load/redraw event and add/remove ellipsis according to the bubble's width and text's width.

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

  series.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);

  });
}

Attach the function on load/redraw

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

example: http://jsfiddle.net/12d997o4/