[Vuejs]-Can't set tooltip and legend dynamically in Highchart with Vue.js

0đź‘Ť

âś…

All your problems occurs because of incorrect implementation of your code. First, setting chart categories doesn’t affect on chart at all. By default, appropriate “category” for every slice is taken from each point name property, so your way of implementation won’t work. You need to change the point values instead of categories.

The easiest way of implementing it, looks (step by step) like that:
– get your challenge_categories by axios.
– create new series array with new data in your setOccurence() function.
– take every received category object, and parse it as a new point in new series. object defined before.
– watch all changes on series field in your component, and when changed – update the chart with new series object.

I prepared simplified example which shows how it should be implemented. Here is the link: http://jsfiddle.net/b2yLc1m3/1/

P.S
We have our official Vue wrapper for Highcharts, which makes the process of chart implementation much easier than with using native approach. I recommend you to take a look on that. I hope it will help you a lot.
Here is the link to npm package: https://www.npmjs.com/package/highcharts-vue

Leave a comment