Custom legend doesn't take mouse events?

[godsamit]

So I tried to use a custom legend following the example in the storybook

My custom legend follows closely to the example. But it doesn't seem mouse events are registered on the legend. I tried to log inside the itemActions, but nothing is being logged to the console.

For some reason, the css rule cursor: pointer doesn't even trigger. The cursor is still default when I hover.

Lastly, I copied the example from the storybook. And even though pointerValue seems to work properly, the mouse event issue persists.

Are there any setting/rules that could be preventing mouse interaction for these charts?

[nickofthyme]

In terms of the legend mouse interactions, you would need to wire the ones you want manually by attaching an event listener to the element representing each item of the legend. Then on this trigger you need to call the respective action (i.e. onItemOverActon, onItemOutAction, onItemClickAction)

const customLegend: CustomLegend = ({ items, pointerValue }) => (
  <div style={{ width: '100%', position: 'relative' }}>
    <p style={{ height: '1.5em' }}>{pointerValue ? moment(pointerValue?.value).format('HH:mm') : 'System Load'}</p>
    {items.map((i) => (
      <button
        key={i.seriesIdentifiers[0].key}
        onMouseOver={i.onItemOverActon}
        onMouseOut={i.onItemOutAction}
        onClick={() => i.onItemClickAction(false)}
        style={{ display: 'block', color: i.isSeriesHidden ? 'gray' : i.color }}
      >
        {i.label} {i.extraValue?.formatted}
      </button>
    ))}
  </div>
);

In the story example you are following, the CustomLegend is mapping over all the legend items and creating a button for each, we then wire back up the onMouseOver, onMouseOut and onClick to preserve the original chart hover and click style changes.

---

As far as the cursor: pointer not working, that's hard to know. I've seen this be flaky here and there, mostly due to running slow, but if it never shows correctly that's not normal.

---

It would help if you could reproduce the issue in a codesandbox demo. Or at a minimum share your code for the CustomLegend you are using as the chart config shouldn't matter too much.

[godsamit]

@nickofthyme Thanks for your response. I'm able to find the root cause: the position: relative rule in the custom legend container. If I add that, things seem to trigger successfully.

I was just using flexbox to position my custom legends and didn't realize the relative positioning had any significance.

In my local server, without the relative positioning, the custom legends show up with no problems. But in my code sandbox, omitting the relative positioning will cause the legends to be invisible.

Maybe in the storybook, besides the warning about fixed legend size, there should be another tip about using position: relative.

[nickofthyme]

Thanks for the demo!

Ugh ok I found the issue(s). Yeah applying the relative position is strange, not exactly sure how to explain why that makes it work. But apart from that the main issue here is the chart background.

We have a chart background element (.echChartBackground) that is used to ensure proper contrast of the chart colors. This element does not properly set it's z-index and thus in this case covers the legend element which is why the pointer events are blocked. By default this background is an opaque white thus why the legend does not show. But when I change the background to be semi-transparent, you can easily see the issue.

Here I'm toggling the position: relative on and off. You can see with the relative style applied the legend is atop the blue background and when it's removed the legend is below. See Demo

I'll open a PR to fix this but if you need it faster, a quick fix would be to add a -1 z-index to the background container.

.echChartBackground {
    z-index: -1;
}

---

Apart from the z-indexing issue I noticed in your demo the chart was being pushed out of the container due to the sizing of the legend. I opened a separate issue here ➡️ #2365