2

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,

| });

Alea
  • 93
  • 1
  • 1
  • 8
  • Have you tried adding a `````` to BarChart.vue, possibly containing an empty ```
    ``` if necessary? I have worked a bit with Chart.js, but not vue-chartjs. I know that with Chart.js, the chart object needs to be bound to a ``````.     – Tim Apr 21 '21 at 14:17
  • I read the documentation and followed the steps but I tried adding a template and an empty div doesn't work. – Alea Apr 21 '21 at 14:57
  • Do you have a specific reason that you want to use vue-chartjs instead of just Chart.js? I have built some test Single File Compontents (Vue CLI) with just Chart.js that I could post as an answer. I am also starting to look at vue-chartjs, and if I get a sample bar chart working then I will plan on posting it here. – Tim Apr 21 '21 at 18:33
  • I tested the code and ran fine for me on a vue 2x project. Are you using v2? Also, could you add your package.json file, so it's easier to simulate your issue. – AT82 Apr 22 '21 at 08:27
  • ... And only worked by downgrading Chart.js to 2.9.4 like in suggested answer. – AT82 Apr 22 '21 at 08:34

2 Answers2

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 }
Tim
  • 1,199
  • 1
  • 7
  • 10
  • I tried to downgrade the chart.js version to 2.9.4 but I am still getting the error I showed in my question – Alea Apr 22 '21 at 07:43
  • Since you are using Single File Components, I am assuming that you are using Vue CLI. If so, it would be easier to analyze and help if you could import your repository (assuming GitHub) into CodeSandbox. – Tim Apr 22 '21 at 13:46
0

I was wasting 3 hours on this and nothing worked. My final solution was simply using chart.js version 3.9.1 with

npm i --save chart.js@3.9.1

Fixed it for my setup with

Vue3, babel-loader, and webpack 4.46.0.

I am not using vue-chart.js

Xab Ion
  • 1,105
  • 1
  • 11
  • 20
Moe
  • 21
  • 3