图表标记为水平条形图

Question

我正在使用Recharts库，并希望有一个垂直条形图，该条形图的末尾带有标签。我遇到的问题是我无法访问条形图的宽度，只能访问它的值。我提出了一个快速而肮脏的解决方案，但是它无法调整大小。我该怎么做才正确？

class CustomizedLabel extends React.Component {
        constructor(props) {
          super(props);
          let perc = '' + props.value*0.9 + '%';
          this.state = {
            x: props.x,
            y: props.y,
            fill: props.fill,
            value: props.value,
            perc: perc
          };
        }
        render () {
            return (
          <text
             x={this.state.value}
             y={this.state.y}
             dy={15}
             dx={this.state.value*1.5+108} // * this is where the solution would need to be (where it would be helpful to have the bar width)
             fontSize='16'
             fontFamily='sans-serif'
             fill={this.state.fill}
             fontColor='white'
             color='white'
             textAnchor="middle">{this.state.value}%
           </text>
            );

        }
      }

class VertChart extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
    };
  }

  render() {
    return (
      <ResponsiveContainer width="100%" height={300}>
        <ComposedChart layout="vertical" data={this.state.data}>
          <XAxis type="number" hide={true} domain={[0, 100]} />
          <YAxis dataKey="name" type="category" />
          <Bar dataKey="value" label={<CustomizedLabel />} ></Bar>
       </ComposedChart>
     </ResponsiveContainer>
    );
  }
}