What problem does it solve? Default Recharts Legend and Tooltip components fall short when dashboards need hover highlighting, click-to-hide series, tooltip ordering that matches the visual stack, or stable pie and donut labels, leaving developers to debug flickering labels and mismatched payload order on their own. ## Core Features & Use Cases - Custom HTML legends: Build legend buttons that highlight the matching stacked series on hover and toggle series visibility on click while keeping hidden series restorable. - Deterministic stacked tooltips: Reverse the Recharts payload so text order matches the visible layer order and append a Total row for quick summation. - Per-chart interaction state: Keep hover and hidden state keyed by chart id so multiple charts sharing the same series metadata behave independently. - Pie and donut stability: Disable label animation and dim non-hovered slices with their labels to stop flickering on hover. - Use Case: A React analytics dashboard shows token unlock schedules as stacked area charts alongside allocation donut charts; use this Skill to add legend-driven highlighting, click-to-toggle series, correctly ordered tooltips with totals, and mobile-safe layouts. ## Quick Start Ask the agent to use the recharts-stacked-interactivity skill to add hover-highlight legends and click-to-toggle series to your stacked Recharts dashboard.
