I use a standalone chart from the Ag Grid
library and want to manipulate manually which legend items should be shown/selected by default. I didn't find any specific API/property which can cover this use-case.
E.g., I want to see selected only the diesel
legend item (and petrol
should be shown unselected),
AgChartsReact
always shows all legend items.
What did I investigate and try?
The chart is a canvas element, so I thought that it is possible to manipulate legend items from the canvas context, which I can get with useRef
hook. But I cannot find how exactly it can be done and is it possible? Here is a ref to Plunker
UPD:
if someone is looking for how to store the data which legends is active or not, here is a function to get this (the same function you will find in 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 }))
);
}
I think you want to use visible: false
on the Petrol series.
This will still show up as greyed out in the legend, but you can click it to open it again.
You can also add showInLegend: false
if you want to remove it from the legend.
If you want it greyed out in the legend but NOT clickable on the legend to make it visible, you might be able to make a custom listener for nodeClick
, but I haven't tried that.