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

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


reactjs javascript recharts
person sahil solanki    schedule 13.06.2018    source источник
comment
Не уверен, что именно вы имеете в виду под align. Чего ты хочешь добиться?   -  person maracuja-juice    schedule 15.06.2018
comment
В скрипте для 2-го и 3-го тактов их метки 'B', 'C' должны быть выровнены по левой стороне (под первым символом метки bar1, т.е. под 'P')   -  person sahil solanki    schedule 03.07.2018

Ответы (1)


arrow_upward
2
arrow_downward

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

person Matthijs van der Veer    schedule 17.06.2019