Currently, I am utilizing the Vue wrapper for Highcharts called highcharts-vue(https://github.com/highcharts/highcharts-vue). However, I am facing an issue where I need to detect the event of a right mouse click (contextmenu) on the chart. To address this, I decided to integrate the Highcharts custom events plugin(https://www.npmjs.com/package/highcharts-custom-events).
In my attempt to install the plugin according to the official instructions, here are the steps I followed:
1. Modified the code in ../node_module/highcharts-vue/src/index.js as shown below:
import generateVueComponent from './component'
import Highcharts from 'highcharts'
import * as customEvent from 'highcharts-custom-events'
var hce = customEvent(Highcharts);
const Chart = generateVueComponent(hce)
export default function install(Vue, options = {}) {
Vue.component(
options.tagName || 'highcharts',
generateVueComponent(options.highcharts || Highcharts)
)
}
export { Chart }
2. Rebuilt the highcharts-vue with "npm run build"
3. Implemented the custom event functions as per the plugin tutorial: events: {
click: () => {
console.log("left click");
},
contextmenu: () => {
console.log("right click");
},
}
Despite following these steps, I was unable to capture any event. Can anyone provide guidance on how to properly integrate the plugin within the Vue wrapper for Highcharts?