Uso un gráfico independiente de la biblioteca Ag Grid
y quiero manipular manualmente qué elementos de la leyenda deben mostrarse/seleccionarse de manera predeterminada. No encontré ninguna API/propiedad específica que pueda cubrir este caso de uso.
Por ejemplo, quiero ver seleccionado solo el elemento de la leyenda diesel
(y la petrol
debe mostrarse sin seleccionar),
AgChartsReact
siempre muestra todos los elementos de la leyenda.
¿Qué investigué y probé?
El gráfico es un elemento de lienzo, por lo que pensé que era posible manipular los elementos de la leyenda desde el contexto del lienzo, que puedo obtener con useRef
hook. Pero no puedo encontrar exactamente cómo se puede hacer y es posible? Aquí hay una referencia a Plunker
UPD:
si alguien está buscando cómo almacenar los datos, qué leyendas están activas o no, aquí hay una función para obtener esto (la misma función que encontrará en Plunker ):
const getLegendStatuses = () => { const [changeEvent] = chartRef.current.chart.legend.allEventListeners.get("change"); const [, data] = changeEvent; const [event] = data; console.log( event.data.map(({ enabled, label }) => ({ label: label.text, enabled })) );
}
Creo que quieres usar visible: false
en la serie Petrol. Seguirá apareciendo atenuado en la leyenda, pero puede hacer clic en él para abrirlo de nuevo.
También puede agregar showInLegend: false
si desea eliminarlo de la leyenda.
Si lo desea atenuado en la leyenda pero NO se puede hacer clic en la leyenda para que sea visible, es posible que pueda crear un oyente personalizado para nodeClick
, pero no lo he intentado.