Tengo que crear un gráfico de barras usando recargas. En el eje X, necesito mostrar la etiqueta y un botón vinculado a cada barra en particular para poder realizar una acción.
Descubrí que es posible usar más de un solo eje X, pero parece que no encuentro cómo reemplazar la clave de datos en un componente en lugar de una cadena. ¿Algunas ideas?
¡Gracias!
Encontré información en la API de recargas https://recharts.org/en-US/examples/CustomizedLabelLineChart
Es posible crear un componente de reacción siempre que devuelva un elemento y, dado que es posible agregar una función onClick, puede comportarse como un botón. Aquí está el ejemplo:
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> ); } }entonces solo necesita llamar al componente en el XAxis de esta manera:
<XAxis tick={<CustomizedTick />} />