JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.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/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container" style="width: 400px;"></div>
</figure>

CSS

.truncate {
  /*  width: 250px; */
  /* inline-size: 150px; */
  /*   white-space: nowrap; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

JavaScript

Highcharts.chart('container', {
  plotOptions: {
    treemap: {
      dataLabels: {
        useHTML: true,
        format: '<p class="truncate"><b>{point.name}</b></a>',
        style: {
          textOverflow: 'allow'
        }
      }
    }
  },
  tooltip: {
    pointFormat: 'data: {point.name}',
  },
  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',
      },
      overflow: 'allow',
      crop: false
    },
    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
    }]
  }],
});