After following some examples to create a test chart, I am facing an issue where the chart renders blank with dummy data.
https://i.sstatic.net/RD77S.png
My initial suspicion is that maybe the options are not being passed for the lines, but it seems like dataCollection is not being populated, similar to every other type of chart. I am fairly new to Vue (only a few hours of experience), so it could be related to updating the state?
Languages.js
import { Line, mixins } from 'vue-chartjs'
//const { reactiveProp } = mixins
export default {
extends: Line,
//mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
StatsSection.vue
<template>
<!-- Stats Section -->
<div class="stats-wrapper" style="margin: 15px 0; padding: 15px;">
<languages :chart-data="datacollection"></languages>
</div>
</template>
<script>
import Languages from './charts/Languages.js'
export default {
components: {
Languages
},
data() {
return {
datacollection: {}
}
},
mounted() {
this.fillData()
},
methods: {
fillData () {
this.datacollection = {
labels: [80, 12],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 60]
}, {
label: 'Data One',
backgroundColor: '#f87979',
data: [72, 43]
}
]
}
}
}
}
</script>