How do I hide an overflowing Highcharts treemap datalabel?

Question

I want to configure a Highcharts treemap so that if the datalabel is long enough to overflow the point bounds (as opposed to just the chart bounds), it is hidden.

An example of the problem can be seen here: http://jsfiddle.net/atootspb/

I would like the final label ("Gggggg") not to display since it overflows its point's boundaries. I have tried experimenting with the dataLabels options including padding, overflow and crop, all to no avail.

Answer 1

This can't be done just by configuring predefined chart options.

Here's a custom code that'll do the job:

  chart: {
    events: {
      load: function() {
        var points = this.series[0].points;
        points.forEach(function(point) {
          console.log(point);
          if(point.shapeArgs.width < point.dataLabel.width) {
            point.dataLabel.hide();
          }
        });
      }
    }
  },

Live demo: http://jsfiddle.net/BlackLabel/y75whsjr/