Canvas is already in use. Chart with ID '<N>' must be destroyed before the canvas can be reused - chart.js with vue-chartjs

Question

I am trying to place several components with a plot in each on the same page and I get this error.

Chart with ID '' must be destroyed before the canvas can be reused

My code:

main.js:

...
import {
  Chart,
  LineController,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
  BarElement,
} from 'chart.js'
Chart.register(
  LineController,
  BarElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
)
...

first component:

<script>
import { Bar } from 'vue-chartjs'

export default {
  name: 'CChartBarExample',
  components: { Bar },
}
</script>

second component:

<template>
        <Line
    :chart-options="chartOptions"
    :chart-data="{}"
    :chart-id="(Math.random() + 1).toString(36).substring(7)"
  />
</template>

<script>
import { Line } from 'vue-chartjs'

export default {
  name: 'CChartBarExample',
  components: { Line },
}
</script>

The path listed in router.js points to component which includes first and second component.

Answer 1

This a horrible debugging of the chart.js. I struggled quite a lot of time trying to change ids, figure out why it works with coreui/chartjs and doesn't work with normal one.

The problem was in the importing and registering in the main.js: we use a component that has some dependencies and we have to register them all, or it will produce such an error (canvas id already registered), which means anything else except problem with registering dependecies.

So, when we add LineElement to main.js, evertything works:

import {
  Chart,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
  BarElement,
} from 'chart.js'
Chart.register(
  LineController,
  LineElement,
  BarElement,
  PointElement,
  LinearScale,
  CategoryScale,
  Title,
)