Invalid scale configuration for scale: x using chart.js for time scale chart

Question

I am working with VueJS and trying to implement a chart with time scale using Chart.js. however I am getting this error : Invalid scale configuration for scale: x

Here is my configuration :

• I have a first component Chart.vue with the following content :

<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>

• And a second component LineChart with the following content :

<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>

How am I getting this error ?

Answer 1

Remove the square parentheses around the x scale option like this :

<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>

Moreover run npm install luxon chartjs-adapter-luxon --save and add import 'chartjs-adapter-luxon'; in the Linechart component.