Vue Chart.JS with Line component : Uncaught Error: class does not have id: [object Object]

Question

I got this exception when using Line component. With Bar it works.

core.typedRegistry.js:38 Uncaught Error: class does not have id: [object Object]
    at TypedRegistry.register (core.typedRegistry.js:38:13)
    at Registry._exec (core.registry.js:154:14)
    at core.registry.js:142:16
    at each (helpers.core.ts:156:10)
    at core.registry.js:134:9
    at Array.forEach (<anonymous>)
    at Registry._each (core.registry.js:125:15)
    at Registry.add (core.registry.js:26:10)
    at Chart.register (core.controller.js:131:14)
    at Chart.vue:7:9

Here is my component :

<script type="module">

import { Line } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, PointElement , CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale , PointElement , Line)

export default {

            data() {
                return {

                   chartData: {
                        labels: [ 'January', 'February', 'March' ],
                        datasets: [ { 
                            label:"Ventes",
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderColor: 'rgb(255, 99, 132)', 
                            data: [40, 20, 12] } ]
                    },
                    chartOptions: {
                        responsive: true
                    }
        
                }
              
            }

            ,

             components: {
                Line
            }

}

</script>

<template>

    <!-- Page Heading -->
    <h1  style = "text-align:center">Graphiques</h1>

    <Line
        id="my-chart-id"
        :options="chartOptions"
        :data="chartData"
    />

</template>

Any idea?

Stackoverflow just said : It looks like your post is mostly code; please add some more details.

So I will write here some blablabla

blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla

Thanks

Answer 1

The answer has been post in the comments :

You're still importing BarElement. Try to import the following items instead and also register them: import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js'

It worked