I am currently utilizing VueJS and attempting to integrate a time scale chart using Chart.js. However, I encountered the following error:
Invalid scale configuration for scale: xBelow is my configuration :
- First, I have a component named
Chart.vuewith the following script :
<script>
computed: {
labels() {
return this.rankingOverTime.map(r => (new Date(r.date)));
}
datasets() {
var datasets = [];
var rank = this.rankingOverTime.map(r => r.rank);
var score = this.rankingOverTime.map(r => r.score);
datasets = [
{
label: "Rank",
data: rank,
cubicInterpolationMode: 'monotone',
backgroundColor: 'rgba(255, 0, 0, 0.5)',
borderColor: 'rgba(255, 0, 0, 0.5)'
}
];
return datasets
}
options() {
var options = {};
options = {
responsive: true,
scales: {
x: [{
type: 'time',
time: {
tooltipFormat: 'DD T'
}
}],
y: {
reverse: true,
title: {
display: true,
text: 'Rank',
color: 'rgba(255, 0, 0, 1)',
font: {
size: 18,
weight: 'bold',
lineHeight: 1.2,
},
},
ticks: {
stepSize: 1,
color: 'rgba(255, 0, 0, 1)'
}
}
},
plugins: {
legend: {
display: false
}
}
}
return options
}
}
</script>
<template>
<LineChart
:labels="labels"
:datasets="datasets"
:options="options"
/>
</template>
- Secondly, there is another component called
LineChartwith the following script :
<script>
import { Chart, registerables } from 'chart.js'
export default {
props: {
labels: Array,
datasets: Array,
options: Object
},
watch: {
datasets(newDatasets) {
this.myLineChart.data.labels = this.labels;
this.myLineChart.data.datasets = newDatasets;
this.myLineChart.options = this.options;
this.myLineChart.update();
}
},
created() {
Chart.register(...registerables)
},
mounted() {
let ctx = this.$refs.lineChart.getContext("2d");
this.myLineChart = new Chart(ctx, {
type: "line",
data: {
labels: this.labels,
datasets: this.datasets,
},
options: this.options
});
}
}
</script>
<template>
<canvas ref="lineChart" />
</template>
What could be causing the occurrence of this error?