Recharts: Text component - labels alignment

Created on 11 Oct 2017  路  1Comment  路  Source: recharts/recharts

I'm using Text component to render XAxis tick labels. But the labels are misaligned and displayed somewhere else, not on the xaxis. ANy help in getting the right props to display the labels correctly?

This is my customized tick component
class CustomizedTick extends Component {

render() {
    const {x, y, stroke, payload} = this.props;

    return (
            <Text style={{fontSize:2}} width={100} textAnchor="middle" scaleToFit={true} >{payload.value}</Text>
            );

}

}
screen shot 2017-10-11 at 3 20 11 pm

Most helpful comment

@hc1skalyanasundaram
Try to add x={x} and y={y}
<Text x={x} y={y} style={{fontSize:2}} width={100} textAnchor="middle" scaleToFit={true}{payload.value</Text>

>All comments

@hc1skalyanasundaram
Try to add x={x} and y={y}
<Text x={x} y={y} style={{fontSize:2}} width={100} textAnchor="middle" scaleToFit={true}{payload.value</Text>

Was this page helpful?
0 / 5 - 0 ratings

Related issues

abhayjeetgupta picture abhayjeetgupta  路  3Comments

FabioFleitas picture FabioFleitas  路  3Comments

amitava82 picture amitava82  路  3Comments

sdoomz picture sdoomz  路  3Comments

velociwabbit picture velociwabbit  路  3Comments