How to add highcharts plugins into highcharts-vue(highcharts vue wrapper)

1
votes

I am using highcharts's vue wrapper highcharts-vue(https://github.com/highcharts/highcharts-vue)
and I need to catch the event of mouse-right-click(contextmenu) on the chart so I install the highcharts custom events plugin(https://www.npmjs.com/package/highcharts-custom-events),

I've tried to install the plugin followed the official document here is my steps

1.change the code in ../node_module/highcharts-vue/src/index.js into

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.rebuild the highcharts-vue with "npm run build" 3.use the function like the plugin tutorial

 events: {
              click: () => {
                console.log("left click");
              },
              contextmenu: () => {
                console.log("right click");
              },

            }

but I didn't catch any event.

is there anyone knows how to install the plugin "into" highcharts's vue wrapper?

1
javascriptvue.jshighcharts

1 Answers

1
votes

highcharts-custom-events is a basic Highcharts module, so you have to import and initialize it in your component like that:

import HighchartsCustomEvents from "highcharts-custom-events";

HighchartsCustomEvents(Highcharts);

Demo: