I am trying to display a chart from Highcharts in Vue.js with Highcharts for Vue. I keep getting the error in the title on the browser console for the watcher I created and the methods (see code below). As well as for other Vue methods (see screenshot below the code).
The watcher triggers the dataSource() method. The dataSource() method is used to read the list and calculate chart data; The const "base" is from where categories and data are going to be extracted. The setup() method is used to set up the chart and display it on the screen (this method will only be triggered when data is ready).
How do I solve these errors ?
<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 each time the list is modified. Triggers dataSource() method;
watch: {
list() {
this.dataSource();
}
},
methods: {
//used to read the list and calculate chart data
dataSource() {
const countries = this.list.map(item => item.country);
//const from where categories and data is going to be extracted
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 });
},
//used to set up the chart and display on the screen. This method will only be triggered when data is ready
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>
