How to use ChartJs in VueJs component using a ES6 bundler

Posted on December 18, 2021

Here a basic Vue.js component that renders a Chart.js

<template>
  <canvas ref="cnv"></canvas>
</template>


<script>
import Chart from 'chart.js/auto'

export default {
  mounted(){
    
    const config = {
      type: 'line',
      data: {
        labels: ['A', 'B', 'C'],
        datasets: [{
          label: 'Chart',
          data: [10, 20, 30]
        }]
      }
    }

    new Chart(this.$refs.cnv, config)
  }
}
</script>