Chart pointClick ContextMenu

Hi!

We need to make a ContextMenu on a PointClick event in the Vaadin Chart and I have not managed to find a good solution for this yet. The Popover or the ContextMenu component can’t be used on the chart point as it doesn’t extend Component.

As a workaround we use the Dialog component and set the top and left in accordance with the absolute x and y of the click event and fill the dialog with buttons, but this needs to be styled to look like our standard context menu, wich we haven’t done.

I would realy like to use the ContextMenu component and i’m wondering if anyone have a good solution or workaround for this?

Best regards Kjell

Not sure if it is a better solution than the one you already have but you could open a Context Menu on a Vaadin Chart point click by using a hidden dummy target component positioned at the click location.

See an example base on a line chart here: An example on how to open a context menu on a Vaadin Chart point click by using a hidden dummy target component positioned at the click location. Tested on Vaadin 24.7.6. · GitHub

The idea is that the ContextMenu is bound to a invisble target component (the div called fakeTarget). The ContextMenu listens to events on that component — like a click — and opens itself accordingly. As we don’t click a real UI element, the click is simulated by calling fakeTarget.getElement().executeJs("this.click()"). This fires a native click event on the Div, which theContextMenu responds to. The fakeTarget is positioned using point mouse coordinates so when the menu opens, it’s positioned visually at the right place.

As the ContextMenu component is not designed to be opened like a modal but to listen to real DOM events on its target component we need to simulate a click on an element we control.

Regards

1 Like

Hi!

This is a great workaround, thanks!

1 Like