Here's my Chartjs component, where I'm attempting to pass two arrays from the backend using Vue.js. Despite successfully retrieving the arrays within Vue, nothing is displaying on the chart. As a newcomer to Vue, I appreciate your patience.
Chartjs.vue
<template>
<div class="main-content">
// other code here ...
</div>
</template>
<script type="text/babel">
// import statements and component definitions here ...
export default {
components: {
// referenced chart components here ...
},
methods: {
async fetchBarChartData ({ anio, sort }) {
// fetching data from API endpoint here ...
}
},
mounted() {
this.fetchBarChartData({anio:2018});
},
data () {
return {
// hardcoded chart labels and initial values setup here ...
}
}
}
</script>
BarLineChart.vue
<template>
<div class="graph-container">
<canvas id="graph" ref="graph"/>
</div>
</template>
<script>
// component logic for rendering the Bar Line chart here ...
</script>
<style scoped>
.graph-container {
height: 300px;
}
</style>
In troubleshooting, I discovered that adding ".data" to the values array caused one component to break while others continued displaying charts below it.
If anyone has encountered similar issues or has experience with this, I would greatly appreciate any guidance. The dashboard template I'm using can be found at laraspace.in.
EDIT: For easier assistance, I've created a codesandbox for this project:
https://codesandbox.io/embed/vue-template-x4z7b
EDIT 2: While I was able to get it working with local values in the sandbox environment, I'm facing difficulties when making API calls locally.