Mixed bubble chart with line chart in vue-chartjs4-CodePudding

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?

CodePudding user response：

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'