title: Highcharts treemap data labels overflow
body: <p>while using Highcharts multi level treemap I ran into data labels overflow issue. Data labels overflows to other area. This works fine at level 1 &amp; 2 when I use option <em>overflow: 'crop'</em> but does not work at level 3. Any idea where it is going wrong.</p>
  
  <p>Here in example area with name:F data label overflows but data label with name:C at level 2 does not overflow.</p>
  
  <p><a href="https://jsfiddle.net/LokeshKG/nvrjbc9o/" rel="nofollow noreferrer">Here is fiddle example</a>.</p>
  
  <pre><code>$(function() {
  var H = Highcharts;
  
  $('#container').highcharts({
  
    chart: {
      type: 'treemap',
      width: 500
    },
    title: {
      text: null
    },
    plotOptions: {
      series: {
        layoutAlgorithm: 'stripes',
        alternateStartingDirection: true,
        levels: [{
          level: 1,
          dataLabels: {
            enabled: true,
            align: 'left',
            verticalAlign: 'top'
          }
        }, {
          level: 2,
          dataLabels: {
            formatter: function () {
              return this.point.realValue;
            },
            overflow: 'crop'
          }
        }, {
          level: 3,
          dataLabels: {
            formatter: function () {
              return this.point.realValue;
            },
            overflow: 'crop'
          }
        }]
      }
    },
    series: [{
      data: [{
        name: 'A',
        id: 'A',
        value: 1,
        color: '#FFFFFF'
      }, {
        name: 'B',
        id: 'B',
        value: 1,
        color: '#FFFFFF'
      }, {
        name: 'C',
        parent: 'A',
        id: 'A-1',
        value: 10,
        realValue: 'thisisveryveryveryveryveryverylongteststring',
        color: '#ECEA8E'
      }, {
        name: 'D',
        parent: 'A',
        id: 'A-2',
        color: '#FFFFFF'
      }, {
        name: 'E',
        parent: 'A-2',
        id: 'A-2-1',
        value: 10,
        realValue: 'A',
        color: '#599753'
      }, {
        name: 'F',
        parent: 'A-2',
        id: 'A-2-2',
        value: 10,
        realValue: 'thisisveryveryveryverylongteststring',
        color: '#1B3C40'
      }, {
        name: 'G',
        parent: 'B',
        id: 'B-1',
        value: 10,
        realValue: 'A',
        color: '#ECEA8E'
      }, {
        name: 'H',
        parent: 'B',
        id: 'B-2',
        color: '#FFFFFF'
      }, {
        name: 'I',
        parent: 'B-2',
        id: 'B-2-1',
        value: 10,
        realValue: 'A',
        color: '#599753'
      }, {
        name: 'J',
        parent: 'B-2',
        id: 'B-2-2',
        value: 10,
        realValue: 'A',
        color: '#1B3C40'
      }]
    }]
  });
  </code></pre>
  
  <p>});</p>