Recharts - align axis label in the left side

Question

I am creating a horizontal bar graph using recharts library. I want to align the y-axis label in the left side.

<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>

Jsfiddle

Answer 1

You can accomplish this by using a custom Tick component.

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>)
    }
})

And then you can use that in your YAxis:

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

I forked your JSFiddle and added those changes.