How can I get treemap datalabels to wrap consistently?

user_4243695 0
Viewed 188

I'm making a Highcharts treemap with some rather long datalabels. Sometimes they wrap, sometimes highcharts truncates them with ellipses (but it really seems like it could wrap them instead). The inconsistency makes it look a bit messy. Is there a way I can force the labels to always wrap?

Here is an example: 

Highcharts.chart('container', {

  colorAxis: {
    minColor: '#003A85',
    maxColor: '#F7F8FA',
    visible: false
  },

  series: [{
    type: "treemap",
    layoutAlgorithm: 'strip',
    layoutStartingDirection: 'horizontal',
    dataLabels: {
      align: 'left',
      verticalAlign: 'top',
      x: 5,
      y: 5,
      style: {
        textShadow: 'unset',
        textOutline: 'none',
        fontSize: '14px',
        fontWeight: 'normal',

      }
    },
    data: [{
      name: 'This is quite a long sentence really, oh well never mind',
      value: 4911,
      colorValue: 0
    }, {
      name: 'This is quite a long sentence really, oh well never mind',
      value: 3701,
      colorValue: 1
    }, {
      name: 'This is quite a long sentence really, oh well never mind',
      value: 3602,
      colorValue: 2
    }, {
      name: 'This is quite a long sentence really, oh well never mind',
      value: 3502,
      colorValue: 3
    }, {
      name: 'This is quite a long sentence really, oh well never mind',
      value: 3114,
      colorValue: 4
    }]
  }],

  plotOptions: {
    treemap: {
      borderWidth: 0,
      dataLabels: {
        borderRadius: 0,
        shadow: {
          enabled: false
        }
      }
    }
  },
  title: {
    text: 'Highcharts Treemap'
  }
});
#container {
  min-width: 300px;
  max-width: 400px;
  margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="container"></div>

(image) Highcharts treemap with inconsistent label wrapping

highcharts
1 Answers

More complex way to control text wrapping can be achieved when combined with the option for datalables, useHTML: true and displaying dataLabels.format as a string you can add your styles and customization there.

  plotOptions: {
    treemap: {
      dataLabels: {
        useHTML: true,
        format: '<p class="truncate"><b>{point.name}</b></a>',
        style: {
          textOverflow: 'allow'
        }
      }
    }

Live demo: https://jsfiddle.net/BlackLabel/zkwg2vnq/

user_121716730
Related