vue-chartjs You may need an appropriate loader to handle this file type. error

Question

I have BarChart.vue file with code:

<script>
import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  mounted() {
    this.renderChart(
      {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
          }
        ]
      },
      { responsive: true, maintainAspectRatio: false }
    );
  }
};
</script>

doesn't have <template></template> . I want to show this bar chart inside Dashboard.vue

<template>
   <div class="dashboard">
       <BarChart />
   </div>
</template>
<script>
import BarChart from '@/components/Dashboard/BarChart'
export default {
    name:'Dashboard',
    components: {
      BarChart,
    },
    data() {
        return{

        }
    },
}
</script>

but I am getting this error

Module parse failed: Unexpected token (6628:12)

You may need an appropriate loader to handle this file type.

| if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {

| decimated.push({

|...data[intermediateIndex1],

| x: avgX,

| });

Answer 1

As a follow up to my comment, and using vue-chart.js, Vue 2, and Vue CLI, after npm installing 'vue-chart.js' and 'chart.js' per the documentation, I tried to create a sample bar chart and ran into a compile warning. This caused my chart to not render in the browser.

warning: in./node_modules/vue-chartjs/es/BaseCharts.js

"export 'default' (imported as 'Chart') was not found in 'chart.js'

I did some searching and found this SO posting that addresses the problem.

I also noticed that 'vue-chartjs' hasn't been updated in 8 months, so at this point I recommend using just Chart.js instead. Less dependencies.

I ended up running into the same error when only using Chart.js, but downgrading my npm chart.js version from 3.1.1 (the current default) to 2.9.4 (that I had used recently) in package.json resolved the problem.

Here is sample bar chart implemention built with Vue 2, Vue CLI, and Chart.js:

Parent.vue

<template>
  <div class="parent">
    <bar-chart :chartData="barChartData" />
  </div>
</template>

<script>
  import BarChart from './BarChart.vue'

  export default {
    components: {
      BarChart
    },
    data() {
      return {
        barChartData: [12, 19, 3, 5, 2, 3],
      }
    }
  }
</script>

BarChart.vue

<template>
  <div class="chart-test">
    <h3>Chart Test</h3>
    <canvas id="chart-canvas" width="500" height="500" ref="chartref"></canvas>
  </div>
</template>

<script>
  import Chart from 'chart.js';
  import { sampleBarConfig } from './chart-configurations.js'

  export default {
    data() {
      return {
        chartObj: null,
        chartConfig: sampleBarConfig
      }
    },
    props: {
      chartData: {
        type: Array,
        required: true
      }
    },
    methods: {
      setChartData() {
        this.chartConfig.data.datasets[0].data = this.chartData;
      }
    },
    mounted() {
      this.setChartData();
      this.chartObj = new Chart(this.$refs.chartref, this.chartConfig);
    },
    // beforeDestroy() {
    //   // This necessary if canvas is reused for a new chart
    //   this.chartObj.destroy();
    // }
  }
</script>

chart-configurations.js

const sampleBarConfig = {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    // See https://stackoverflow.com/questions/38512001/charts-js-graph-not-scaling-to-canvas-size
    responsive: false,
    //maintainAspectRatio: false
  }
}

export { sampleBarConfig }