Grey Out Legend with Custom Data

[FTInterritus7624]

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.

legend.markers.template.setup = function (marker) {
  let check = am5.Graphics.new(root, {
    fill: am5.color(0x000000),
    fillOpacity: 1,
    width: 20,
    height: 20,
    layer: 50,
    svgPath:
      "M15.75 2.527c-.61-.468-1.46-.328-1.902.32l-6.325 9.255L4.04 8.328a1.3 1.3 0 0 0-1.922-.062 1.505 1.505 0 0 0-.062 2.043s4.234 4.695 4.843 5.168c.61.468 1.457.328 1.903-.32L16.05 4.55c.445-.653.308-1.555-.301-2.024Zm0 0"
  });
  check.states.create("disabled", {
    fillOpacity: 0
  });
  marker.children.push(check);
};

[zeroin]

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.

[FTInterritus7624]

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