Tengo un problema con la biblioteca de recargas, en este caso, el componente BarChart

Lo que quiero lograr es personalizar el texto de la etiqueta en xAxis, ya creé un componente personalizado para marcar, para hacer que el texto sea demasiado largo con puntos suspensivos o algo así, pero parece que no puedo hacer nada por el desbordamiento de texto o decidir cualquier tamaño . Aquí está mi código hasta ahora:

 function renderTicks(props) { console.log(props) const space = props.width / props.visibleTicksCount console.log(space) const stringLength = props.payload.value.length * 7 console.log(stringLength) return ( <text style={{ fontSize: 10 }} width={70} verticalAnchor="start" textAnchor="middle" x={props.x} y={props.y}>{props.payload.value}</text> ) } function BarChart({ config = {}, data = {} }) { console.log(data) return ( <StyledChart width={450} height={450} data={data} > <XAxis tick={renderTicks} height={100} interval={0} dataKey="name" > <Label value="" content={<LabelCustom />} /> </XAxis> <YAxis /> <Tooltip /> <Bar dataKey="value" fill={colorsChart[0]} /> </StyledChart> ); }

Aquí está el comportamiento actual:

Encontré muchos problemas como este buscando el problema pero no una solución válida, cualquier sugerencia es apreciada