I have to create a bar chart using recharts. In the X axis I need to display the label and a button linked to each particular bar in order to do an action.
I found that it is possible to use more than a single X axis but I don't seem to find how to replace the dataKey to a component instead of a string. Any ideas?
Thanks!
I found information in recharts API https://recharts.org/en-US/examples/CustomizedLabelLineChart
It is possible to create a react component as long as it returns a element, and since it's possible to add an onClick function it can behave as a button. Here's the example:
class CustomizedAxisTick extends PureComponent {
render() {
const { x, y, stroke, payload } = this.props;
return (
<g transform={`translate(${x},${y})`} onClick={()=> console.log(payload.value)}>
<text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-35)">
{payload.value}
</text>
</g>
);
}
}
then you just need to call the component in the XAxis like this:
<XAxis tick={<CustomizedTick />} />