Can users click on data points within the VChart to show a list of actions?

Question Description

How can a data point in the chart be clicked to trigger a display of available actions, just like shown in this screenshot?

Solution

This can be achieved through the event interaction of the VChart chart

• Register click events for chart elements
• Through the event callback parameter, you can get the information of the click event, such as event position
• render a menu, add the actions you need to respond to in the menu

Code Example

vchart.on('pointerdown', { level: 'mark' }, ({ event }) => {
  // show your menu
  event.preventDefault();
  menu.style.display = 'block';
  menu.style.left = `${event.pageX}px`;
  menu.style.top = `${event.pageY}px`;
});

Result

Demo: https://codesandbox.io/s/click-menu-m42d9j

Quote

Event option: https://visactor.io/vchart/api/API/event

Event tutorials: https://visactor.io/vchart/guide/tutorial_docs/Event

github：https://github.com/VisActor/VChart