Applying custom hover/active states on legend markers

This is a demo tutorial. While there is no step-by-step commentary available (yet), the live demo below is fully functional. Feel free to open it for full source code.

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

Code

// 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)
});

// 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

See the Pen Hover and active states on legend items by amCharts team (@amcharts) on CodePen.