I have a Vue js application that is not rendering a simple highcharts bar chart. Although I am able to console the data fetched from the database, I am struggling to display it in the chart.
As a newcomer to Vue js, I am unsure of what I might be missing in my code.
package.json
{
"name": "my-dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^1.6.8",
"core-js": "^3.8.3",
"crypto-browserify": "^3.12.0",
"dotenv": "^16.4.5",
"highcharts": "^11.4.1",
"highcharts-vue": "^2.0.1",
"os-browserify": "^0.3.0",
"path": "^0.12.7",
"path-browserify": "^1.0.1",
"stream-browserify": "^3.0.0",
"vm-browserify": "^1.1.2",
"vue": "^3.2.13"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser",
"ecmaVersion": 2021
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
componenets/BarChart.vue
<template>
<div class="chart-container">
<highcharts :options="chartOptions"></highcharts>
</div>
</template>
<script>
import Highcharts from "highcharts";
import axios from "axios";
export default {
name: "BarChart",
components: {
Highcharts,
},
data() {
return {
chartOptions: {
chart: {
type: "column", // Use "column" for bar chart
},
title: {
text: "Crop Production by Country",
},
xAxis: {
categories: ["USA", "China", "Brazil", "EU", "India", "Russia"],
crosshair: true,
},
yAxis: {
title: {
text: "1000 metric tons (MT)",
},
},
tooltip: {
valueSuffix: " (1000 MT)",
},
series: [
{
name: "Corn",
data: [406292, 260000, 107000, 68300, 27500, 14500],
},
{
name: "Wheat",
data: [51086, 136000, 5500, 141000, 107180, 77000],
},
],
},
};
},
mounted() {
this.fetchData();
},
methods: {
async fetchData() {
try {
const response = await axios.get(
"http://localhost:3001/api/web?startDate=2023-04-01&endDate=2023-04-03"
);
const data = response.data;
console.log(data);
// Assuming data from API is properly formatted
const categories = [
...new Set(data.map((item) => item.report_date)),
].sort();
// Update chart options with fetched data
this.chartOptions.xAxis.categories = categories;
this.chartOptions.series[0].data = data.map((item) => item.value);
// Set new chart options to trigger reactivity
this.chartOptions = { ...this.chartOptions };
console.log(this.chartOptions);
} catch (error) {
console.error("Error fetching data:", error);
}
},
},
};
</script>
<style scoped>
.chart-container {
width: 100%;
height: 400px; /* Set a desired height for the chart container */
}
</style>
App.vue
<template>
<div id="app">
<h1>Multiple Charts Example</h1>
<BarChart />
</div>
</template>
<script>
import BarChart from "./components/BarChart.vue";
export default {
name: "App",
components: {
BarChart,
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
This code snippet only displays "Multiple Charts Example" without rendering the actual charts. What could be causing this issue?
Please advise on how to resolve this problem.