Trying to incorporate a Highcharts chart into Vue.js using Highcharts for Vue has been proving challenging. The browser console keeps throwing an error related to the watcher I set up and the methods I implemented (refer to the code snippet below). Similar errors are also occurring with other Vue methods, as depicted in the screenshot provided.
The watcher is responsible for triggering the dataSource() method, which reads the list data and calculates the necessary chart information. The "base" constant holds the core category and data extraction logic. Meanwhile, the setup() method configures and displays the chart on the interface, but it will only execute once the data is fully loaded.
How can these errors be resolved?
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
import { mapState } from "vuex";
import _ from "lodash";
import { Highcharts } from "highcharts";
export default {
computed: mapState({
list: state => state.list
}),
//Watcher for every modification of the list, triggers the dataSource() method
watch: {
list() {
this.dataSource();
}
},
methods: {
dataSource() {
const countries = this.list.map(item => item.country);
const base = _(countries)
.countBy()
.map((value, key) => ({ key, value }))
.orderBy(["value"], ["desc"])
.value();
const categories = base.map(item => item.key);
const values = base.map(item => item.value);
this.setup({ categories, values });
},
setup(obj) {
const { categories, values } = obj;
Highcharts.chart("container-for-countries", {
chart: {
type: "column"
},
title: {
text: "Monthly Average Rainfall"
},
subtitle: {
text: "Source: WorldClimate.com"
},
xAxis: {
categories: categories,
crosshair: true
},
yAxis: {
min: 0,
title: {
text: "Rainfall (mm)"
}
},
series: [
{
name: "Quantidade",
data: values
}
]
});
}
}
};
</script>