TreeMap Datalabels

Hello, I’m wondering the best solution to working with datalabels in the treemap. Ideally, I’d like for the labels to be shown in the box if the box is large enough compared to the text length and if not, cut off the text and show ellipsis using text-overflow: ellipsis.

I’m using ResponsiveTreeMapHtml. Would appreciate some help here. An example of text that I’d like “ellipsed”

I’ve tried label={(val1)=> {return <div className="treemap-datalabels">{val1.name}</div>}}

.treemap-datalabels {
  text-overflow: ellipsis !important;
  text-align: left;
  padding-left: 4px;
}

[ccoelh0]

I found this solution: you can use the prop label and trim the text that is rendered.

const modifyLabel = (data) => { 
   const labelSize = data.id.length 
   const positionToSlice = 10
   return data.id.slice(0, positionToSlice)
   
}

return (
<TreeMap
          data={dataGraph}
          identity="name"
          value="value"
          margin={{top: 10, right: 10, bottom: 10, left: 10}}
          label={modifyLabel}
  ... />)

[cnaresh7]

bump