Recharts - выровнять метку оси с левой стороны - PullRequest
Новая
       5

Recharts - выровнять метку оси с левой стороны

0 голосов
/ 13 июня 2018

Я создаю горизонтальную гистограмму, используя библиотеку 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>

Jsfiddle

1 Ответ

0 голосов
/ 17 июня 2019

Вы можете сделать это, используя пользовательский компонент 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 и добавил эти изменения.

...