How do I hide an overflowing Highcharts treemap da

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

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

Answer 2

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/