Call a method on clicking a point in highchart

[Manikandan079]

Hi, Previously we were using normal highcharts and we had code like below to give out the name or value of the bubble clicked by the user in bubble chart. plotOptions: { series: { dataLabels: { enabled: true, format: '{point.name}' }, cursor: 'pointer', point: { events: { click: function () { alert(this.name); } } } } }

Is there a way to implement this in highcharts-vue ?

I am creating my JSON format from Intersystems Cache and passing it to vue highcharts. I have implemented the highcharts same way. but since this uses a javascript method the page is not loading. Please help me with this.

Thanks,

[pawelfus]

Hi @Manikandan079

This shouldn't be a problem. Options in highcharts-vue and Highcharts are no different. What may be a problem is that part:

I am creating my JSON format from Intersystems Cache

JSON format does not support functions. For example:

JSON.stringify({ a: '1', b: function () { return this; }});

Returns:

"{"a":"1"}"

How to resolve that? StackOverflow has a few suggestions:

• https://stackoverflow.com/questions/2001449/is-it-valid-to-define-functions-in-json-results
• https://stackoverflow.com/questions/939326/execute-javascript-code-stored-as-a-string (second answer!)

There are probably other serializers available, apart from JSON.parse/stringify.

If that's not the case, please provide a live demo of the issue, we will help you in debugging.

[Manikandan079]

thanks for the reply @pawelfus . I am trying to do some work around for that and i am facing the issue in my browser console SCRIPT438: Object doesn't support property or method 'call' . Does this ring any bell to you ?

[pawelfus]

Not really, that sounds like one of Internet Explorer specific issues.

[Denyllon]

Hi @Manikandan079 ,

Are you able to provide us some minimal working live example, where the problems are noticeable? It would be much convenient to produce the demo, using one of the most popular sandboxes like CodeSandbox or Stackblitz.

[SincerelyUnique]

data() { return { loading: false, option: { ... ... series: { cursor: 'pointer', point: { events: { click: function(e) { let dataParams = { name: e.point.options.name }; handleUsageTable(dataParams) } } } } }

mounted() { window.handleUsageTable = this.handleUsageTable },

methods: { handleUsageTable(dataParams) { this.$nextTick(() => { this.$emit('handleUsageTable', dataParams) }) } }

How about this way... (window.func = this.func, like this) I use vue for the first time, just for you reference,thanks