I am currently utilizing charts.js for Vue and facing an issue with pushing a variable number of datasets (including background color, data, and label) to a chart. I expect the data object to be logged as shown in this link, but unfortunately, the datasets include an extra observer object causing the charts not to render. Take a look at my code snippet:
let dynamicDataCollection = [];
for (i =0; i < allDeptNames.length; i++) {
let datasets = [
{
label: allDeptNames[i],
backgroundColor: barColours[i],
data: [spaceIterationIns[i].length]
}
]
dynamicDataCollection.push(datasets);
}
that.datacollection2 = {
labels: ['Weekly'],
datasets: [
]
}
that.datacollection2.datasets = dynamicDataCollection;
console.log(that.datacollection2);
This is how my data object looks like:
data () {
return {
windowWidth: 0,
windowHeight: 0,
datacollection2: null,
chartData: {
}, chartOptions: {
}
}
},
Here's a glimpse of my template setup:
<charts v-if="last7DaysSelected" ref="visits_per_dept_bar"
:css-classes="'visitsChart_bar'"
:chart-id="'visits_per_dept_bar'"
:height="150"
:options="chartOptions"
:chart-data="datacollection2"
></charts>
In addition, here is my chart.js file:
import {Line, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;
chartOptions.defaultFontFamily= "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Helvetica Neue', sans-serif"
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ['options'],
mounted () {
let that = this;
that.chartOptions = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
},
}],
xAxes: [{
ticks: {
suggestedMin: 0,
},
}],
},
legend: {
labels: {
fontColor: 'rgb(168, 119, 181)',
}
}
},
this.renderChart(this.chartData, that.chartOptions)
}
}
Furthermore, this is what my current output objects show: https://i.sstatic.net/c7eZm.jpg
For an expanded view, check out: https://i.sstatic.net/7vJpj.jpg
It seems like Vue is attempting to work its reactivity magic, but it's causing issues by including the {_ ob _} object. Is there a way to render the chart with a variable number of datasets without encountering this problem? I've tried preventing the observer object, but it seems necessary due to vue.charts.js requiring reactivity. Any suggestions on how to possibly handle the for loop differently within the datacollection2 object rather than just pushing dataset objects to it?