Currently, I am working on a single file component that utilizes Chart.Js to display a basic visualization of some hardcoded data. The Chart.Js library is being called from a CDN placed in the head section of my index.html file.
The project is based on the official Webpack template.
Strangely, the chart does not render unless I interact with the component within the Vue Dev Tools extension.
I have attempted switching between computed and created/mounted methods, but it has not resolved the issue.
Provided below is my code. Any assistance in resolving this rendering problem would be greatly appreciated.
<template lang="html">
<div>
<div class="row">
<div class="col-sm-12 col-md-4">
<canvas id="carbChart"></canvas>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
calories: 3000,
childSex: 'male',
childAge: 'eighteen'
}
},
computed: {
nutrientCharts: function() {
let calories = this.calories;
let carbCtx = document.getElementById('carbChart').getContext('2d');
let carbChart = new Chart(carbCtx, {
type: 'doughnut',
data: {
labels: ['Low', 'Good', 'Too Much'],
datasets: [{
label: 'carbs',
data: [calories * .45, calories * .65, calories * 1],
backgroundColor: ['orange', 'blue', 'red']
}]
}
});
}
}
}
</script>