重新图表 - 在左侧对齐轴标签

Question

我正在使用库创建水平条形图recharts。我想将 y 轴标签对齐在左侧。

<BarChart width={400} height={300} data={data} layout="vertical" margin={{right: 40}}>
   <XAxis hide axisLine={false} type="number"/>
   <YAxis dataKey="name" type="category" axisLine={false} tickLine={false} />
   <Bar dataKey="pv" stackId="a" barSize={15} radius={[20,20,20,20]} fill="#8884d8" background={{fill: "#eee", radius: [20,20,20,20]}} tick={false} />
   <Bar dataKey="uv" stackId="a" barSize={15} radius={[20,20,20,20]} fill="#eee" >
     <LabelList dataKey="amt" position="right" />
   </Bar>
</BarChart>

杰斯小提琴

Answer 1

您可以通过使用自定义 Tick 组件来实现此目的。

const CustomYAxisTick = React.createClass({
    render() {
        const { x, y, payload } = this.props;
        return (<g transform={`translate(${0},${y})`}>
            <text x={0} y={0}
                textAnchor="start"
                fill="#666">{payload.value}</text>
        </g>)
    }
})

然后你可以在 YAxis 中使用它：

<YAxis tick={<CustomYAxisTick />} />

我分叉了你的JSFiddle并添加了这些更改。