Closed FTInterritus7624 closed 9 months ago
Here is a modified example: https://codepen.io/team/amcharts/pen/bGZWYxa
The thing is, legend with custom data does not set "disabled" on the itemContainer, as there is no show/hide method on the item of the legend. So you need to add toggleKey:"disabled"
for the itemContainer. Also, you used fillOpacity
on the itemContainer's disabled state - Containers do not have fillOpacity
setting, only opacity
.
Thank you very much, the grey out works perfectly on its own. However, if I may, by having that toggle key disabled, it causes what I want to call a "de-sync" b/t the actual column showing and hiding with the legend grey out when I use
legend.itemContainers.template.events.on("click", function (e) {
series.dataItems.forEach(function (temp) {
if (
!temp.isHidden() &&
e.target.dataItem.dataContext.color.hex === temp.get("fill").hex
) {
temp.hide();
} else {
temp.show();
}
});
});
to remedy this, I simply added
else if (
temp.isHidden() &&
e.target.dataItem.dataContext.color.hex !== temp.get("fill").hex
) {
return;
}
the solution above works by allowing the columns to "sync" with the toggle key. I was wondering If it is possible to where when I grey out Legend 1 (column related hides) and proceed to grey out Legend 2, Legend 1 auto gains its color again (column related shows), that way, it matches my initial events code w/o the else if
. If that is not possible, I am fine with my solution. I'm really just trying to find which version would look better since I'm only dealing with 2 legends
Question I've been playing around with legends with custom data. I managed to get the columns to filter based on the custom legend. However, I noticed that whenever I clicked on the legend to filter, the legend does not grey out. Is there a way to grey out custom legends?
This is my codepen: https://codepen.io/FTInterritus7624/pen/oNVWxOO
I tried using this in hopes of getting at least the checkmark to grey out. Also tried setting "disabled" state for legend.itemContainers, but no results.