Mixed bubble chart with line chart in vue-chartjs4 - vue.js

Question

I am using vue2 with vue-chartjs4 legacy mode and I want to create a mixed chart that uses the line chart and bubble chart component.
My MixedChart component looks like this:
<template>
<Bubble :chart-data="chartData" :chart-options="options"/>
</template>
<script>
import { Bubble } from 'vue-chartjs/legacy';
import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale } from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, PointElement, LineElement, CategoryScale, LinearScale)
export default {
name: 'bubble-chart',
components: { Bubble },
props: {
chartData: {
type: Object,
required: true
},
options: {
type: Object,
default: () => {}
}
}
};
</script>
And my data looks like this:
{
labels: ['', ' ', ''],
datasets: [{
type: 'bubble',
label: 'bubble',
backgroundColor: config.colors.info,
borderColor: config.colors.info,
data: [{
x: ' ', // use middle label
y: 20,
r: 8
}],
order: 3
}, {
type: 'line',
label: 'test',
borderColor: config.colors.danger,
data: [20, 20, 20],
fill: false,
pointRadius: 0,
order: 1
}, {
type: 'line',
label: 'test1',
borderColor: config.colors.warning,
data: [30, 30, 30],
fill: false,
pointRadius: 0,
order: 1,
hidden: true
}, {
type: 'line',
label: 'test2',
borderColor: config.colors.primary,
data: [40, 40, 40],
fill: false,
pointRadius: 0,
order: 2
}],
}
This results in; Error in mounted hook: "Error: "line" is not a registered controller.".
How do you create a mixed chart in chart-vuejs4?

Answer 1

As your error states you need to import and register the LineController
import {Chart, LineController} from 'chart.js';
Chart.register(LineController);
Or you can just import everything and let chart.js register it:
import Chart from 'chart.js/auto'