Legend items themselves are not clickable/hoverable, only the text and marker inside them are

[alon-loris]

When you hover or click a legend item to toggle the visibility or highlight the relevant series, it only works if you hover/click on the text itself or on the marker.
If you hover/click on empty space inside the item (the apexcharts-legend-series element), for example between the marker and the text, on the empty space after the text, or on the padding of the element, nothing will happen.

Steps to Reproduce

1. Hover over or click on some white space in the item of the legend.
2. See that nothing happens - the relevant series is not highlighted / its visibility is not toggled.

Expected Behavior

The entire apexcharts-legend-series element should be clickable/hoverable, and in the default css it even gets a cursor: pointer to suggest that it is, but it's not.

Actual Behavior

Only the text and marker are clickable/hoverable.

Screenshots

I've added borders and padding to make it more clear. The marker and text with the blue border are interactive, but other than that everything inside the black border is not.

Reproduction Link

https://codepen.io/alon-loris/pen/yLzmdGx

[maciej-ka]

Hi, I would like to grab this ticket for development.