Error: "barWithErrorBars" is not a chart type. Vue - chartjs-chart-error-bars

Question

I am trying to include the library chartjs-chart-error-bars ( https://github.com/sgratzl/chartjs-chart-error-bars ) in my application built in Vue (Clean project, created just to test the library), but when I try to add the graphic with type: "barWithErrorBars" I get the mentioned error.

The project was created with :

npm install -g @vue/cli-init
vue init webpack my-project

I have these versions in my package.json:

• "chart.js": "^ 2.9.4"
• "chartjs-chart-error-bars": "^ 1.2.1",
• "vue": "^ 2.5.2",

---

This is my component:

<template>
  <canvas id="canvas"></canvas>
</template>

<script>
import Chart from 'chart.js'
export default {
  name: 'ErrorBar',
  mounted () {
    let chart = new Chart(document.getElementById('canvas').getContext('2d'), {
      type: 'barWithErrorBars',
      data: {
        labels: ['A', 'B'],
        datasets: [
          {
            data: [
              {
                y: 4,
                yMin: 1,
                yMax: 6
              },
              {
                y: 2,
                yMin: 1,
                yMax: 4
              }
            ]
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    })
    return chart
  }
}
</script>

<style scoped>
canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
</style>

Answer 1

You're missing the import for the library:

import Chart from 'chart.js'
import 'chartjs-chart-error-bars'👈

demo