How Do I Hide An Overflowing Highcharts Treemap Datalabel?

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

Solution 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/

Solution 2:

You can use the overflow option for DataLabels.

Check here: http://jsfiddle.net/ukfs5qo6/

Or, a more dynamic approach:

You have full control on the labels with the formatter option.

To specifically get if the label is overflowing the content is a bit hard to do, but you can get the width of the content and make some calculation on how much pixels the text would have and then decide to show or not the label. You can even show only part of the label if it doesnt fill the whole thing.

Here's an example: http://jsfiddle.net/7jdedzy0/ In this example, I am showing labels only of points which value represents more than 5% of the whole map.

Hope it helps, regards