Applying custom hover/active states on legend markers

This demo shows how we can define custom states on legend markers to override default hover and active colors.

Code

TypeScript

// Disable default states on item containers
legend.itemContainers.template.states.create("active", {});
legend.itemContainers.template.states.create("hover", {});
legend.itemContainers.template.states.create("hoverActive", {});

// Create new states directly on marker rectangles
legend.markerRectangles.template.states.create("active", {
  stroke: am5.color(0xff0000)
});

legend.markerRectangles.template.states.create("hover", {
  stroke: am5.color(0x00ff00)
});

legend.markerRectangles.template.states.create("hoverActive", {
  stroke: am5.color(0xff0000)
});

JavaScript

// Disable default states on item containers
legend.itemContainers.template.states.create("active", {});
legend.itemContainers.template.states.create("hover", {});
legend.itemContainers.template.states.create("hoverActive", {});

// Create new states directly on marker rectangles
legend.markerRectangles.template.states.create("active", {
  stroke: am5.color(0xff0000)
});

legend.markerRectangles.template.states.create("hover", {
  stroke: am5.color(0x00ff00)
});

legend.markerRectangles.template.states.create("hoverActive", {
  stroke: am5.color(0xff0000)
});

Example

Open in CodePen