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

Question

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?

Wojciech Chmiel · Accepted Answer · 2019-06-06 09:23:48Z

2

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:

https://codesandbox.io/s/vue-template-i7m7v

answered Jun 6, 2019 at 9:23

Wojciech Chmiel

7,4071 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy Peng Over a year ago

Thank you very much!! I modified my code according to your codeSandBox project(it's really clear),and it works!!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related